我有三列layoyut - 左,中,右。
<div id="content-area" class="clearfix">
<div id="content-left"><img src="fileadmin/billeder/logo.jpg" width="180" height="35" alt=""></div>
<div id="content-middle"><f:format.html>{content_middle}</f:format.html></div>
<div id="content-right">
<f:format.raw>{navigator}</f:format.raw>
<f:format.raw>{content_right}</f:format.raw>
</div>
</div>
使用此CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-area {
padding: 10px 0;
margin: 5px auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
width: 600px;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
text-align: left;
}
左边是180px,中间是600px,右边是180px,这是一个960px的布局,就像这样。
在大多数情况下,这可以作为意图使用,但我希望中间列根据右列中的内容具有稍微灵活的宽度。 我将图像放在右列中,宽度为360px,中间列为420px宽。
我的问题是宽度超过180像素的图像,fx。 360px,将打破列的浮动,按照这个小提琴
我希望它像这个小提琴,但没有中间栏中的固定宽度。
答案 0 :(得分:1)
使用display: table-cell
代替花车...
如果您支持更现代的浏览器,可以尝试:
#content-area {
width: 960px;
padding: 10px 0;
margin: 5px auto;
display: table;
border: 1px dashed blue;
}
#content-left {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
}
#content-middle {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-middle p {
margin-top: 10px;
}
#content-right {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
text-align: left;
}
表格单元格的宽度值的作用类似于最小值,因此如果将图像插入到一个图像中,则左右列将展开,而中间列将调整为占据剩余宽度。
答案 1 :(得分:1)
应该解决上述问题的最短形式:
HTML:
<div class="area">
<div class="side"></div>
<div>Some content here</div>
<div class="side"></div>
</div>
CSS:
<!-- language: CSS -->
.area {
width: 100%;
display: table;
}
.area > *{
display:table-cell;
}
.side {
width: 100px;
background-color:gray;
}
请参阅this fiddle。
答案 2 :(得分:0)
如果您可以随意改变列的源顺序,可以将#content-middle
降级到底部,并将其display: block
和overflow: hidden
。
标记:
<div id='all-wrapper'>
<div id="content-area" class="clearfix">
<div id="content-left"></div>
<div id="content-right"></div>
<div id="content-middle"></div>
</div>
</div>
CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
display: block;
overflow: hidden;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
}
现在,当右栏的宽度发生变化时,中间栏会占用可用空间。
演示:http://dabblet.com/gist/7200659
必读:http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/