两个固定宽度的 div 和一个动态的（无内容）

Question

我想要 3 列

这是我的代码

div id="boundaries">
<div id="fenceleft"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/fencescew.png" alt="fencescew" width="52" height="92" /></div>
<div id="fence"></div>
<div id="fenceright"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/fencescew.png" alt="fencescew" width="52" height="92" /></div>
</div>  

和 CSS

#boundaries {
overflow: hidden;
position:absolute;
top:240px;
display:block;
width:100%;
max-width: 1395px;
height:92px;
z-index: 15;
}

#fenceleft {
float:left;
display: block;
width:52px;
max-width: 52px;
height:92px;
}

#fenceleft IMG {
-moz-transform: scaleX(-1); /* For Mozilla Firefox */
-o-transform: scaleX(-1);   /* For Opera */
-webkit-transform: scaleX(-1); /* For Safari, Google chrome */

/* For IE */
filter: FlipH;
-ms-filter: "FlipH";
}

#fence {
float: left;
background: url(img/fence.png) repeat-x;
display: block;
height:82px;
}

#fenceright {
float:right;
display: block;
width:52px;
max-width: 52px;
height:92px;
}

在边界 div 内，我希望左栅栏和右栅栏包含它们所做的固定宽度图像。我希望#fence div 填充两个 div 之间的剩余空间，右侧图像需要固定在页面的右侧，左侧是左侧。剩下的我想要一个 div。

注意这个问题很常见，但我的问题很独特。问题是中间或“#fence”div 没有内容，只有背景图片。使用这个选定的代码，什么都不会显示，因为它没有填充宽度的内容。

总结一下我想要 [52px div 固定在左边] [剩余宽度 div] [52px div 固定在右边]

Answer 1

将 boundaries div 的 css 更改为：

#boundaries {
   overflow: hidden;
   position:absolute;
   top:240px;
   display:block;
   left:0;
   right:0;
   height:92px;
   z-index: 15;
}

这会将您的整个内容宽度正确缩放到屏幕分辨率，nvr 会给出像width:1395px 这样的宽度。由于您将 boundaries 容器设置为绝对值，因此您可以使用其顶部、左侧、右侧底部值（以及宽度和高度）来拉伸它；

现在将您的 fenceleft css 更改为：

#fenceleft {
    position: relative;
    float:left;
    left:0;
    width:10%;
    height:100%;
}

所以现在，对于任何分辨率，您的 leftfence 将始终位于其父级左边框左侧的 0 处，即boundaries div。并给它一个百分比高度，这样，当你需要调整高度时，你只需要调整父类，只需要一个类。

将您的 fenceright css 更改为：

#fence {
    position: relative;
    height:100%;
    width:80%;
    float: left;
}

现在请注意：由于您已将 float:left 放置在 fenceleft div 上，因此栅栏将与其自身对齐，即距离边界（父）div 的左边界 10%（栅栏左的宽度）。

另外，因为它被赋予了 80% 的宽度，这意味着 80%+10%（从左至右）=90% 因此 100-90 = 10% 即 10% 的宽度保留在 @987654332 的右侧@分区。您可以在其中放置您的fenceright

将您的 fenceright 更改为：

#fenceright {
    position: relative;
    left:90%;
    width:10%;
    height:100%;
    border:Solid 1px #666666;
}

现在您的所有 div 都已正确对齐，没有水平滚动，覆盖了屏幕的整个水平宽度。 不要直接复制和粘贴这些。相应地组织你的CSS，做数学。考虑一系列分辨率，而不仅仅是您的屏幕。

read this.它会帮助你。

Answer 2

在 html 中，中心 div 必须在左右 div 之后。

<div id="boundaries">
     <div id="fenceleft"><img src=""  width="52" height="92" /></div>
     <div id="fenceright"><img src="" width="52" height="92" /></div>
     <div id="fence"></div>
</div> 

在 CSS 中 ma​​rgin: 0 auto 让中心 div 填充剩余部分，并且必须给出中心 div 的 width。 ＃栅栏 { 边距：0 自动； 背景：url（）重复-x； 显示：块； 高度：92px； 宽度：700px； 位置：相对;
}

#fenceright {
     position:relative;
     float:right;
     display: block;
     width:52px;
     max-width: 52px;
     height:92px;
}

嗨，举个例子，see here。我希望这可以帮助你。

Answer 3

#fixwidth1{
width:52px;

}

#fixwidth2{
width:52px;

}

#dynamicwidth{
width:calc(100%-104px); //i.e 100% width of browser - sum of two fixed width 
background:#114455;
}

Answer 4

据我了解，您需要这样的东西：

html:

<div class="leftFence"></div>
<div class="center"></div>
<div class="rightFence"></div>

css:

.leftFence,
.rightFence {
    position: fixed;
    height: 100%;
    width: 52px;
    background: red;
    top: 0;
}
.leftFence {
    left: 0;
}
.rightFence {
    right: 0;
}
.center {
    margin: 0 52px;
    height: 100px;
    background: gray;
}

Demo