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

据我所知，你需要这样的东西：

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

Answer 2

#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 3

将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%;
}

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

将你的fenceright css更改为：

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

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

另外，因为它的宽度为80％，这意味着80％+ 10％（左起）= 90％因此100-90 = 10％，即10％宽度保留在{{的右侧1}} div。您可以在其中放置fence

将您的fenceright更改为：

fenceright

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

read this.它会帮助你。

Answer 4

在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 边距：0自动让中心div填充剩余部分，并且必须给出中心div的宽度。 #fence { 保证金：0自动; background：url（）repeat-x; 显示：块; 高度：92px; 宽度：700px; 位置：相对;
}

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

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

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

4 个答案: