1

我想要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 固定在右边]

4

4 回答 4

2

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

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

演示

于 2013-03-05T11:33:28.917 回答
1 
#fixwidth1{
width:52px;

}

#fixwidth2{
width:52px;

}

#dynamicwidth{
width:calc(100%-104px); //i.e 100% width of browser - sum of two fixed width 
background:#114455;
}
于 2013-03-05T11:30:03.280 回答
0

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容器是绝对的，你可以使用它的顶部、左侧、右侧底部值（以及宽度和高度）来拉伸它；

现在将您的fenceleftCSS更改为：

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

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

将您的 fenceright css 更改为：

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

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

此外，由于它的宽度为 80%，这意味着 80%+10%（从左侧）=90%，因此 100-90 = 10%，即fencediv 右侧剩余 10% 的宽度。您可以在其中放置您的fenceright

把你改成fenceright这样：

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

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

读这个。它会帮助你。

于 2013-03-05T11:04:12.810 回答
0

在 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 中 margin: 0 auto让中心 div 填充剩余部分，并且必须给出中心 div 的宽度。#fence { 边距：0 自动；背景：url（）重复-x；显示：块；高度：92px；宽度：700px；位置：相对；
}

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

嗨，一个例子，见这里。我希望这可以帮助你。

于 2013-03-05T11:19:09.877 回答