Центриран DIV и външен DIVS

Това е HTML кодът

<div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

Center Div има фиксирана ширина, левият и десният div трябва да използват оставащата ширина

CSS:

.left { float: left; }
.center { width: 500px; float: left; }
.right { float: right; }

Какво мога да направя, че левият и десният div да използват оставащата ширина?


html css css-float
person Patrick Bläcker    schedule 01.12.2011    source източник
comment
Защо плувката? Опитахте ли да използвате проценти?   -  person    schedule 01.12.2011
comment
Действителната цел течно оформление с 3 колони с 500px централна колона ли е или нещо друго?   -  person Wesley Murch    schedule 01.12.2011
comment
как центрирате центъра??   -  person MCSI    schedule 01.12.2011
comment
Вдясно оформлението с 3 колони с централна колона   -  person Patrick Bläcker    schedule 01.12.2011

Отговори (2)


arrow_upward
2
arrow_downward

Плавно оформление с 3 колони с 500px централна колона

Това със сигурност е трудно оформление. Намерих тази демонстрационна страница, която го емулира:

http://www.gunlaug.no/tos/moa_27c.html

И успя да възпроизведе с доста малко количество CSS и HTML (ще трябва да промените маркирането си). Демонстрация: http://jsfiddle.net/jAsMx/

<div id="side1">
    <div class="col">
        <p>First</p>
    </div>
    <div>
        <p>Second</p>
    </div>
</div>
<div id="side2">
    <div class="col">
        <p>Third</p>
    </div>
</div>

#side1 {
    width: 50%;
    float: left;
    margin: 0 -260px 0 0;
    background: #fff;
    padding: 0 0 10px;
}
#side1 div {
    margin: 0 250px 0 0;
    min-height: 300px;
    background: #dda;
}
#side2 {
    width: 50%;
    float: right;
    margin: 0 0 0 -260px;
    background: #fff;
}
#side2 .col {
    background: #dda;
    margin: 0 0 0 250px;
}
#side1 .col {
    background: #fea;
    width: 500px;
    float: right;
    margin: 0 -250px 0 0 ;
    position: relative;
}
.col {
    /* For backgrounds: This is not an equal height layout yet... */
    min-height: 300px;
}

въведете описание на изображението тук

Той използва отрицателни маржове, за да компенсира фиксираната ширина на централната колона и подреждане на колони 2-1-3 (което осигурява незначителен SEO тласък, тъй като основното ви съдържание е по-високо в източника на страницата). Въпреки че това не е готово за производство оформление, то трябва да ви помогне да започнете.

person Wesley Murch    schedule 01.12.2011
comment
благодаря, това е страхотно :) ще го пробвам, но изглежда много добре. - person Patrick Bläcker; 03.12.2011

arrow_upward
0
arrow_downward

A: уточнете ширината на родителския DIV
B: разделете подходящата ширина на дъщерните DIV
C: запазете в ума си концепцията на модела (http://www.w3schools.com/css/css_boxmodel.asp)

виж това:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  /TR/xhtml1    /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrap{
    width:950px;
    margin:0 auto;
    }
.left { float: left; border:1px solid red;height:400px; width:222px; }
.center { width: 500px; float: left; border:1px solid blue;height:400px; }
.right { float: right; border:1px solid green; height:400px; width:222px; }
</style>
</head>
<body>
<div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

::Втори отговор за коментар::
пиша код чрез Javascript, който решава проблема ви, тествайте това:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  
/TR/xhtml1    /DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

#wrap{

    width:100%;

    margin:0 auto;

    border:1px solid #FFFF00;

    }

#left { float: left; border:1px solid red;height:400px; width:222px; }

#center { width: 500px; float: left; border:1px solid blue;height:400px; }

#right { float: right; border:1px solid green; height:400px; width:222px; }

</style>

</head>

<body>

<div id="wrap">

    <div id="left"></div>

    <div id="center"></div>

    <div id="right"></div>

</div>



</body>

</html> 

<script type="text/javascript">

document.getElementById('center').style.width = '500px';

var wrapWidth = (document.getElementById('wrap').style.width = 
window.innerWidth+'px').split('px');

var centerWidth =(document.getElementById('center').style.width).split('px');

var rightLeft =((wrapWidth[0] - centerWidth[0])-6)/2;

document.getElementById('right').style.width 
=document.getElementById('left').style.width = rightLeft+'px' ;



    </script>
person G0back    schedule 01.12.2011
comment
искам да използвам 100% от размера на браузъра, така че не знам ширината на външните divs. Това е проблема. - person Patrick Bläcker; 01.12.2011