我想有一个三列页面,其中中间的一个具有动态宽度(窗口调整大小)和最小一个(div #middle
:min-width:400px;
)。
问题是当我调整大小时第三列是包装。
我知道如果我用#middle div width:75%;
替换width:500px;
这会起作用,右列不会换行,但我不再有动态宽度的中间列了...
我怎么解决这个问题?
#contentwraper {
position: relative;
min-width: 800px;
}
#left {
position: relative;
float: left;
background-image: url("http://www.artetics.com/images/artfrontpageslideshow.png");
background-repeat: no-repeat;
background-position: center center;
min-width: 128px;
width: 12%;
height: 128px;
}
#middle {
position: relative;
float: left;
min-width: 400px;
width: 75%;
text-align: center;
}
#right {
position: relative;
float: left;
background-image: url("http://www.emoticonswallpapers.com/avatar/art/Test-Card.jpg");
background-repeat: no-repeat;
background-position: center center;
min-width: 128px;
width: 12%;
height: 128px;
}
.imagemiddle {
position: relative;
float: left;
background-image: url("http://www.tradewindscientific.com/images/t_logo.gif");
background-repeat: no-repeat;
background-position: center center;
width: 25%;
height: 128px;
}
<div id="contentwraper">
<div id="left"></div>
<div id="middle">
<div class="imagemiddle"></div>
<div class="imagemiddle"></div>
<div class="imagemiddle"></div>
<div class="imagemiddle"></div>
</div>
<div id="right"></div>
</div>
如果您希望在页面太大(或窗口不够)时右侧列溢出文档右侧,则唯一的解决方案是表。
否则,试试这个:3 columns, middle one with flexible width
你可以在#left之后或之前移动它来改变#right的行为;或者通过设置溢出:隐藏在#middle上。