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

I want 3 columns

我想要3列

here is the code I have

这是我的代码

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>

and the CSS

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

Inside the boundaries div I want fence left and fence right to contain a fixed width image which they do. I want the #fence div to fill the remaining space between the two divs the right image needs to be fixed to the right hand side of the page and the left, the left hand side. the remainder I would like to have a div.

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

NOTE this question is common but my problem unique. the problem is that the middle or '#fence' div has no content and just a background image. with this selected code nothing displays because it has no content to fill the width.

注意这个问题很常见,但我的问题很独特。问题是中间或'#fence'div没有内容,只有背景图像。使用此选定代码不显示任何内容,因为它没有内容来填充宽度。

to sum up i want [52px div fixed left] [remaining width div] [52px div fixed right]

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

4 个解决方案

#1

As I understand you need something like this:

据我所知,你需要这样的东西:

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

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

#3

change css for boundaries div to this:

将边界div的css更改为:

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

this will properly scale your entire content width to the screen resolution, nvr ever give width like width:1395px. since you made your boundaries container to be absolute, you can stretch it using its top,left,right bottom value (and also width and height);

这将适当地缩放你的整个内容宽度到屏幕分辨率,nvr给宽度像宽度:1395px。因为你使你的边界容器是绝对的,你可以使用它的顶部,左,右底部值(以及宽度和高度)来拉伸它;

now change your fenceleft css to this:

现在将您的fenceleft css更改为:

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

so now, for any resolution, your leftfence will always be at 0 left from the left border of its parent i.e. boundaries div. and give it a height in percentage, so that, whenever you need to adjust height, you just have to adjust the parents class, just one class.

所以现在,对于任何分辨率,你的左边距离总是在其父边界左边界处0,即边界div。并给它一个百分比的高度,这样,无论何时你需要调整高度,你只需要调整父类,只需要一个类。

change your fenceright css to this:

将你的fenceright css更改为:

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

now notice: since you have placed float:left on the fenceleft div, fence will align next to itself i.e. 10% (width of fenceleft) away from the left border of boundaries(parent) div.

现在注意:因为你已经放置了float:left在fenceleft div上,栅栏将在它自身旁边对齐,即10%(fenceleft的宽度)远离边界(parent)div的左边界。

also, since it has been given a width of 80%, that means, 80%+10%(from left)=90% hence 100-90 = 10% i.e. 10% width is remaining to the right of fence div. in which you can place your fenceright

另外,由于宽度为80%,这意味着80%+ 10%(左起)= 90%因此100-90 = 10%,即10%宽度保留在栅栏div的右侧。你可以放置你的fenceright

change your fenceright to this:

将你的击剑改为:

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

now all your divs are properly aligned, with no horizontal scroll, covering entire horizontal width of screen. do not copy and paste these directly. organize your CSS accordingly, do the math. think about a range of resolutions and not just your screen.

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

read this. it shd help you out.

读这个。它会帮助你。

#4

in the html the center div must be after the left and the right div.

在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>

in CSS margin: 0 auto let the center div fill the remainder， and width of the center div must be given. #fence { margin:0 auto; background: url() repeat-x; display: block; height:92px; width: 700px; position:relative;
}

在CSS边距:0自动让中心div填充余数,并且必须给出中心div的宽度。 #fence {margin:0 auto; background:url()repeat-x;显示:块;高度:92px;宽度:700px;位置:相对; }

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

hi, one example, see here. i hope this can help you.

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

#1