浮動列上的最小寬度（HTML \ CSS）

我需要您的幫助。我正在使用下面的設計，但想要設置它，以便在設置的大小下列不會長時間壓縮\縮小。我曾嘗試設置「最小寬度」，但無法讓它工作。請幫忙。浮動列上的最小寬度（HTML CSS）

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>

來源

2014-07-10 Stuart Smith

，而不是發佈一個鏈接到外部網站，能否請你提取和只張貼相關的代碼？ –

想一想，如果它更容易從零開始，那麼如何創建一個帶有標題部分的頁面，然後再增加4列，以適應頁面寬度，但不會縮小到設置大小以下，然後再縮小頁腳部分。這需要使用html \ css –

的組合來完成，請抓住一些html css教程，嘗試一些東西，然後返回一個更具體的問題。 –

將interestin啥子你想看到你的錯誤。當我添加了背景顏色和最小寬度COL1，...它爲我工作：

#col1 { 
    background: none repeat scroll 0 0 blue; 
    float: left; 
    left: 77%; 
    min-width: 200px; 
    overflow: hidden; 
    position: relative; 
    width: 21%; 
}

來源

2014-07-10 10:50:06 jungerislaender

奇數，如果您看到px值的最小寬度，它可以工作，但如果將其設置爲％值，則不會。至少解決了問題。 Tha說，無論如何，隨着窗口縮小，停止列落在下一列下方？哦，謝謝。 –

想通了，但感謝您的意見。 –

浮動列上的最小寬度（HTML \ CSS）

回答

相關問題