我需要你的帮助。我正在使用下面的设计，但想对其进行设置，以便在设定的大小下列不会长时间压缩\收缩。我试过设置“最小宽度”，但就是无法正常工作。请帮忙。
http://matthewjamestaylor.com/blog/equal-height-columns-4-column.htm
提前致谢
编辑:添加代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style media="screen" type="text/css">
/* <!-- */
body {
margin:0;
padding:0;
}
#header h1,
#header h2,
#header p {
margin-left:2%;
padding-right:2%;
}
#active2 #tab2,
#active3 #tab3,
#active4 #tab4,
#active5 #tab5 {
font-weight:bold;
text-decoration:none;
color:#000;
}
#footer {
clear:both;
float:left;
width:100%;
}
#footer p {
margin-left:2%;
padding-right:2%;
}
/* Start of Column CSS */
#container4 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#b2f0f9; /* column 4 background colour */
}
#container3 {
clear:left;
float:left;
width:100%;
position:relative;
right:25%;
background:#89ffa2; /* column 3 background colour */
}
#container2 {
clear:left;
float:left;
width:100%;
position:relative;
right:25%;
background:#ffa7a7; /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:25%;
background:#fff689; /* column 1 background colour */
}
#col1 {
float:left;
width:21%;
position:relative;
left:77%;
overflow:hidden;
}
#col2 {
float:left;
width:21%;
position:relative;
left:81%;
overflow:hidden;
}
#col3 {
float:left;
width:21%;
position:relative;
left:85%;
overflow:hidden;
}
#col4 {
float:left;
width:21%;
position:relative;
left:89%;
overflow:hidden;
}
/* --> */
</style>
</head>
<body id="active4">
<div id="header">
HEADER CONTENT
</div>
<div id="container4">
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">
<!-- Column one start -->
<h2>Equal height columns</h2>
<p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>
<!-- Column one end -->
</div>
<div id="col2">
<!-- Column two start -->
<h2>No Images</h2>
<p>This four column layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and HTML?</p>
<!-- Column two end -->
</div>
<div id="col3">
<!-- Column three start -->
<h2>Valid XHTML strict markup</h2>
<p>The HTML in this layout validates as XHTML 1.0 strict.</p>
<!-- Column three end -->
</div>
<div id="col4">
<!-- Column four start -->
<h2>Cross-Browser Compatible</h2>
<p>This 4 column layout has been tested on the following browsers:</p>
<!-- Column four end -->
</div>
</div>
</div>
</div>
</div>
<div id="footer">
FOOTER CONTENT
</div>
</body>
最佳答案
如果您尝试查看错误所在，将会很有趣。 当我将背景颜色和最小宽度添加到 col1 时，...它对我有用:
#col1 {
background: none repeat scroll 0 0 blue;
float: left;
left: 77%;
min-width: 200px;
overflow: hidden;
position: relative;
width: 21%;
}
关于css - float 列的最小宽度 (HTML\CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24673728/