浮动栏的最小宽度（HTML \ CSS）

debugcn 发表于 Dev

斯图尔特·史密斯

我需要你的帮助。我正在使用以下设计，但要对其进行设置，以使在设置的大小下，列将不再长compress \ shrink。我尝试设置“最小宽度”，但无法使其正常工作。请帮忙。

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%;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。