如何在不使用CSS3功能的情况下，在第一列上有额外的宽度约束的情况下实现这种两列流体布局？
如何在不使用CSS3功能的情况下，在第一列上有额外的宽度约束的情况下实现这种两列流体布局？
提问于 2013-02-21 19:15:15
布局如下：
它本质上是一个两列流体-流体布局，第一列的规格是：
width: 30%;
min-width: 200px;
max-width: 300px;列的高度应该是同步的，但不是常量值。
对于记录，我尝试使用表格和表格单元格显示，但Firefox、Safari和Chrome忽略表格单元格的max-width，因此该解决方案不起作用。
Stack Overflow用户
回答已采纳
发布于 2013-02-24 04:43:10
下面是我想出的一个解决方案。在here on my test server上观看现场直播。
因为您希望同时使用像素值和百分比，所以必须将百分比限制在您定义的像素值范围内。例如，这意味着当左边的列是其最小的列(200px)时，这等于30%，并强制剩余的70%为466px。这只是同时使用像素值和百分比的限制...但这是我在没有使用Javascript的情况下得到的最好的东西。
希望这能有所帮助！
<head>
<title>twoColumn</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
overflow: hidden;
}
div.wrap {
background-color: yellow; /* for illustration's sake */
margin: 0 auto; /* to center it all, for illustration's sake */
min-width: 700px;
max-width: 1000px;
overflow: hidden; /* to hide the overrun from the 3000px of faux-column padding*/
}
div.column1 {
background-color: blue; /* for illustration's sake */
width: 30%;
max-width: 300px;
min-width: 200px;
float: left;
margin: 0 -30% -3000px 0; /* to offset the faux-column padding */
padding-bottom: 3000px; /* to create a faux-column appearance after the left column's content */
}
div.column2 {
float: right;
width: 70%;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="wrap">
<div class="column1">
column1<br />
column1<br />
column1<br />
column1<br />
column1<br />
column1<br />
column1<br />
column1<br />
column1<br />
column1<br />
column1<br />
column1<br />
column1<br />
column1<br />
column1<br />
column1
</div> <!-- end .column1 -->
<div class="column2">
column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 colunn2
</div> <!-- end column 2 -->
<div class="clear"></div>
</div> <!-- end .wrap -->
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15000832
复制相关文章
相似问题
腾讯云开发者
