div repeat-x 被左右 div 包围答案

【问题标题】：Div repeat-x surrounded with left and right divdiv repeat-x 被左右 div 包围
【发布时间】：2011-05-28 05:40:44
【问题描述】：

http://jsfiddle.net/CApW2/

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

【问题讨论】：

jsfiddle.net/CApW2/1 ?
嗯，当我替换图像的颜色时，它突然不再固定了：jsfiddle.net/CApW2/2
因为这些图片不在 jsfiddle 服务器上...？
当我在有图片的地方运行脚本时，它也是动态的。如果我在 div 中输入 A，那么你只能看到 A 后面的图像，我必须输入“dfgsgdsgdsgg”，然后我才能看到整个图像
您是否要求左右“列”始终保持与中心相同的高度，并且它们是否只包含垂直重复的图像？ - 中心是否也有自己的背景图像

标签： css html

【解决方案1】：

这可以是固定高度或流动高度。左列和右列是固定宽度，而中间列是流动的。在源代码中，侧栏是 asides，after 是中心栏。虽然您可以直接设置每一列的样式，但在编辑宽度/填充/边距/边框时要小心……您必须对每一列的 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>

【讨论】：