Question

我无法以正确的方式完成它，左右div是两个图像，中心是repeat-x div。左右div必须是固定的宽度和高度，中心div固定高度但是拉伸宽度。

Answer 1

这可以是固定的也可以是流体高度。左列和右列是固定宽度，而中间列是流体。在源代码中，side列是 asides ，在中间列之后。虽然你可以直接设置每一列的样式，但是在编辑宽度/填充/边距/边框时要小心......你必须在CSS中对每一个进行多次更改（但它的分组和评论相当不错，所以你不应该这样做很麻烦）。

CSS：

<style>
.two-col {
 overflow:hidden;
}
.two-col > aside {
 position:relative;
 float:left;
 width:250px;
 padding-bottom:10000px;
 margin-bottom:-10000px;
}
.two-col > div {
 position:relative;
 float:left;
 width:100%;
 padding-bottom:10000px;
 margin-bottom:-10000px;
}
.two-col.right {
 padding-left:0;
 padding-right:270px; /* Width of aside (width+padding+margin+border) */
}
.two-col.right > aside {
 margin-right:-100%;
}
.two-col.right > div {
 margin-right:10px;
 padding-right:10px;
}
.two-col.left {
 padding-left:260px; /* Width of aside (width+padding+margin+border) */
}
.two-col.left > aside {
 right:260px; /* Width of aside (width+padding+margin+border) */
 margin-left:-100%;
}
.two-col.left > div {
 margin-left:-10px; /* Left padding + left border */
 padding-left:10px;
}
.searchbar.two-col .two-col {
 padding-bottom:10000px;
 margin-bottom:-10000px;
}

.searchbar {
 height:75px; /* Simply remove this to have fluid height */
}
.searchbar .leftColumn { /* Left Column */

}
.searchbar .rightColumn { /* Right Column */

}
.searchbar .centerColumn { /* Center Column */

}

</style>

HTML：

<div class="two-col left searchbar">
 <div>
  <div class="two-col right">
   <div class="centerColumn">Center</div>
   <aside class="rightColumn">Right</aside>
  </div>
 </div>
 <aside class="leftColumn">Left</aside>
</div>

Div repeat-x用左右div包围

1 个答案: