2
&을 복사하여 다음 마크 업과 CSS를 붙여 붙여 효과를 볼 수 있습니다.3 열 유체 레이아웃
"바닥 글"부분에 문제가 있습니다.
이제 "column1"및 "column3"이 절대적으로 배치됩니다.
"column2"가 가장 높은 경우에만 작동합니다.
"바닥 글"을 모든 조건에서 column1 ~ column3으로 인터리브하지 않는 방법은 무엇입니까?
태그 :
<body>
<div id="mainwrap">
<div id="header"><p>A fluid-width faux-columns example</p></div>
<div id="contentarea" class="clearfix">
<div id="contentarea2" class="clearfix">
<div id="column2">
<p>This layout uses absolute/relative positioning to position the side columns within
their respective faux columns containers.</p>
<p>You can control the maximum and minimum widths of the fluid center area.
Once the layout reaches its maximum width, it centers itself in the browser as the window
gets wider.</p>
<p>Nulla scelerisque. Sed tincidunt. Quisque eu nisl. Phasellus
mi ante, aliquet vel, vestibulum sit amet, consectetuer non, ante. Suspendisse
consequat condimentum enim. Morbi vestibulum lorem sit amet enim. Nulla venenatis
fermentum purus.</p>
<p>Nunc justo nisl, vulputate in, sagittis in, pretium sodales,
magna. Nullam felis diam, bibendum ut, dictum in, tincidunt vitae, magna.
Nunc mattis congue leo.</p>
</div><!--end column2-->
<div id="column1">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div><!--end column1-->
<div id="column3">
<p>This template uses the Alsett clearing method.</p>
</div><!--end column3-->
</div><!--end contentarea2-->
</div><!--end contentarea-->
<div id="footer">This is the footer</div>
</div><!--end mainwrap-->
</body>
CSS : 당신은 그냥 CSS에서 할수 없어
body {font: 1.0em verdana, arial, sans-serif;
text-align:center;
}
* {margin:0; padding:0;}
div#mainwrap {min-width:780px; max-width:960px;
margin-left:auto; margin-right:auto;
text-align:left;
}
div#header {height:32px; background-color:#CAF; text-align:center;}
div#contentarea { background-color:#FFF;
background:url(images_pres/faux_left.gif) repeat-y top left;
position:relative;
}
div#contentarea2 {background-color:#FFF;
background:url(images_pres/faux_right.gif) repeat-y top right;
position:relative;
}
div#column1 {width:150px;
position: absolute;
top:0px; left:0px;
background-color:#CCC;
overflow:hidden;
}
div#column2 {background-color:#FFF;
margin:0 170px 0 150px;
}
div#column3 {width:170px;
position:absolute;
top:0px; right:0px;
background-color:#DDD;
overflow:hidden;
}
div#footer {background-color:#FAC; text-align:center; padding-top:6px;}
div#column1 ul {margin: 20px 0 0 26px;}
div#column2 p {font-size:.8em; margin:0 30px 1em ;}
div#column3 p {margin: 20px 10px 0 10px;}
이 열 1과 Colum3는 2 열은 유연하고 폭 고정되는 동안 doctype.com – CarlG