以下是问题的示例:http://jsfiddle.net/andfinally/nJ97q/2/ 谢谢! Fred
在包裹固定列的最小宽度基础上再增加一点宽度,设置包裹 div 的 min-width 属性。这样可以避免它对其他列产生影响。
#row { min-width: 400px; }
.main {
padding: 10px;
background: #efefef;
display: table-cell; //this locks to #sideNav
}
#sideNav {
display: table-cell; //this wraps the sidebar and middle and locks to main
width: 280px;
verticle-align: top;
}
.middle {
display: table-cell; //this locks with .sidebar
width: 140px;
padding: 10px;
background: #bbb;
}
.sidebar {
display: table-cell; //this locks with .middle
width: 100px;
padding: 10px;
background: #555;
}
我想知道为什么不使用表格?
比如:
<table class="row">
<tr>
<td class="main">
</td>
<td class="middle">
</td>
<td class="sidebar">
</td>
</tr>
</table>
没有一种干净的方法来做这件事。但是谁需要干净呢?
我不建议混合使用固定和流体宽度,但如果你这样做,你可能需要媒体查询(IE有很多填充程序可用)。然后你可以检查容器是否小于X,在这种情况下重新排列布局(所有列的1/3或者只是全部垂直等)。
不过,这个例子有点奇怪。中间所有的空白是什么?哪个是内容?
PS. 不要使用min-width
。那会使整个响应性失效。
我曾遇到类似问题,需要一个固定宽度的左侧列(菜单结构),但右侧列随着浏览器的缩小而响应式地调整大小。
最终,我实现了一些额外的媒体查询(它们已经存在以处理其他边缘案例),并找到适用于该媒体查询的右侧列的百分比宽度。这确实会稍微"跳动"一下(我仅使用了2个"额外"媒体查询,超出了标准的手持/平板电脑/桌面媒体查询),但在两者之间的所有分辨率中,它不会断行。 实际上,在每个媒体查询之前,您都要调整上下文来防止其断行。更多的媒体查询将等于更平滑的断点,因为浏览器被调整大小。
我可以接受这种跳动,因为我不是为那些调整浏览器大小的用户构建,而是为了确保它在不同分辨率的设备上能够正常工作。
有一个注意事项,当计算右侧列的百分比宽度时,使用的基础宽度是您所在的媒体查询的宽度,而不是原始的全宽度。此外,您必须使用min-width,并使用每个媒体查询部分最小分辨率可用的大小。
/* 641+ */
@media all and (min-width:641px) {
.itemDetailLanding {
width: 58.81435257410296%; /* 377 / 641 */
}
}
/* 725-768 */
@media all and (min-width: 725px) {
.itemDetailLanding {
width: 63.44827586206897%; /* 460 / 725 */
}
}
/* 769+ */
@media all and (min-width: 768px) {
.itemDetailLanding {
width: 65.625%; /* 504 / 768 */
}
}
/* 860-990 */
@media all and (min-width: 860px) {
.itemDetailLanding {
width: 69.18604651162791%; /* 595 / 860 */
}
}
/* 990+ */
@media all and (min-width:990px) {
.itemDetailLanding {
width: 74.04040404040404%;
}
}
我认为下面的解决方案可能会对你有所帮助。
由于您正在以百分比给“row” div设置宽度,因此每次缩小窗口时它都会自动调整大小。如果可以,请使用像素宽度,如果不能,则使用min-width,以便它不会在min-width以下重新调整大小,从而使您的面板保持完好无损。
要使其平滑: 您可以添加JavaScript使其平滑。使用window.onresize事件调用一个函数,该函数包括代码,通过使用定时函数,每10毫秒左右将“row”的宽度增加10像素左右,直到达到最大长度,在这种情况下,即窗口的长度被达到。但是,如果您以像素为单位设置宽度,否则将产生丑陋的缩小和放大效果。
希望能有所帮助, Ashwin