复杂的CSS定位
Oli*_*ver 6 html css css-position
我想用CSS实现这个定位:
但经过几天尝试后我获得的最好成绩是:
你能帮助我实现这个定位吗,考虑到:
- "try"图片中的红色注释(参见下面的JSFiddle)表明了一些主要的限制
- 定位应该适用于IE8 +,FF10 +,Chrome,Opera,Safari(使用CSSPie和selectivizr兼容IE8)
这是JSFiddle和代码:
HTML
<body>body (all divs may have some padding, some margin and some border. All divs adjust their height to their content.)
<div id="globalcontainer"><span class="important">#globalcontainer (fixed width, not really centered into body : see center)</span>
<div id="header">#header (100%)</div>
<div id="middle">#middle (100%)
<div id="left">
<span class="important">#left (on the left of content, with a fixed min-width.<br>
<br>
Width adjusted to content if content > min-width. <br>
<br>
If left+right+center min-width > global container width, then still adjusts its size to its content and goes outside globalcontainer limits.<br>
<br>
Inner divs have variable (and unknown) width, sticked to the right)</span>
<br>
<DIV class="bloc" style="width:300px;">bloc</div>
<DIV class="bloc" style="width:50px;">bloc</div>
<DIV class="bloc" style="width:500px;">bloc</div>
</div>
<div id="center"><span class="important">#center (width adjusted to globalcontainer size - left size - right size, with a fixed min-width.<br>
<br>
Stays centered on the screen whatever the left or right size are<br>
--> if left or right divs are not present in the HTML (or present with display:none), center div stays on the center of the screen)</span>
<div id="center-middlerow">#center-middlerow (100%)
<div id="pageReceiver">#pageReceiver (100%)
<div id="page">#page (100%)<br>
<div id="pageHeader">#pageHeader (100%)</div>
<div id="pageContent">#pageContent (100%)</div>
</div>
<div id="tip" style="display: block;">#tip (under page)</div>
</div>
<div style="text-align:center" id="center-bottomrow">#center-bottomrow (100%)</div>
</div>
<div id="right"><span class="important">#right (on the right of content, with a fixed min-width.<br>
<br>
Width adjusted to content if content > min-width. <br>
<br>
If left+right+center min-width > global container width, then still adjusts its size to its content and goes outside globalcontainer limits.<br>
<br>
Inner divs have variable (and unknown) width, sticked to the right )</span>
<br>
<DIV class="bloc" style="width:30px;">bloc</div>
<DIV class="bloc" style="width:60px;">bloc</div>
<DIV class="bloc" style="width:90px;">bloc</div>
</div>
</div>
</div>
<div id="footer">#footer (100%)</div>
</div>
</body>
CSS
* {
font-family:Arial;
font-size:11px;
border:1px solid black;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color:rgba(125,125,125,0.1);
}
span {
border:0px;
padding:0px;
background-color:transparent;
}
span.important {
color:red;
font-weight:bold;
}
html {
border:0px;
padding:0px;
background-color:white;
}
/* Real CSS starting here */
BODY {
padding:20px;
padding-bottom:0px;
}
#globalcontainer, #left, #center, #right , #header, #footer {
margin:auto;
background-color:transparent;
display:table;
}
/* ====================================================== */
#globalcontainer {
min-width:1130px;
max-width:1130px;
width:100%;
vertical-align:top;
}
#header {
margin-bottom:10px;
vertical-align:top;
width:100%;
}
#middle {
display: table;
vertical-align:top;
}
#footer {
margin-top:10px;
vertical-align:top;
text-align:center;
width:100%;
}
/* ====================================================== */
#left {
vertical-align:top;
float:left;
padding-right:20px;
}
#center {
vertical-align:top;
display: table-cell;
width:100%;
}
#center-toprow {
padding:10px;
padding-top:0px;
}
#center-middlerow {
}
#center-bottomrow {
padding:5px;
margin-top:30px;
}
#right {
vertical-align:top;
float:right;
padding-left:20px;
}
#left DIV.bloc {
float:right;
white-space:nowrap;
}
#right DIV.bloc {
float:left;
white-space:nowrap;
}
/* ====================================================== */
#pageReceiver {
margin:auto;
width:100%;
}
#page {
cursor:default;
background-color:#F8F8F8;
border:1px solid black;
padding:20px;
width:100%;
position:relative;
min-height:591px;
}
#pageHeader {
margin:auto;
margin-bottom:15px;
display: -moz-inline-stack;
display: inline-block;
*display: inline;
}
#tip {
margin-top:5px;
margin-left:20px;
margin-right:20px;
padding:5px;
background-color:transparent;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
对于如此复杂的布局，border-box您还需要仔细调整尺寸以获得所需的外观。
检查这个小提琴：http://jsfiddle.net/SXJuT/（希望它看起来像你的屏幕截图）
全屏： http: //jsfiddle.net/SXJuT/embedded/result/
CSS：
html, body { margin:0; padding: 0; height: 100%; width: 100%; overflow: hidden; font-size: 9px; }
div { border: 1px solid blue; box-sizing: border-box; padding: 2px; margin: 4px; }
#globalcontainer { width: 99%; height: 98%; background-color: #deebf7; }
#header { height: 5%; background-color: #d1e4f3; }
#middle { height: 86%; background-color: #d1e4f3; display: table; border-spacing: 4px; width: 99%; }
#footer { height: 5%; background-color: #d1e4f3; }
#left, #center, #right { display: table-cell; background-color: #c4ddf1; }
#left { width: 14%; }
#center { width: 68%; }
#right { width: 14%; }
#center-middlerow { height: 80%; background-color: #bad5eb; }
#center-bottomrow { height: 20%; background-color: #bad5eb; }
#pageReceiver { height: 78%; background-color: #b1d0ec; }
#tip { height: 16%; background-color: #b1d0ec; }
#page { height: 95%; background-color: #a7cbe9; }
#pageHeader { height: 14%; background-color: #2e75b5; }
#pageContent { height: 62%; background-color: #2e75b5; }
#pageFooter { height: 14%; background-color: #2e75b5; }
.bloc { height: 20%; background-color: #2e75b5; }
#left > .bloc:nth-child(1), #right > .bloc:nth-child(1) { width: 50%; }
#left > .bloc:nth-child(2), #right > .bloc:nth-child(2) { width: 70%; }