寬度，最小寬度和最大寬度的組合
[英]Combination of width, min-width and max-width
問題描述
我要實現以下目標：一種設計，即兩列寬度相同，覆蓋文檔的整個寬度或像素的固定寬度，以較小者為准。 當將它們調整為一定的寬度時，應將它們彼此向下移動並占用屏幕寬度的最多100％（恰好100％很好，但這不是必需的）。
我想出了以下代碼，但未應用100％的max-width 。
我可以這樣組合百分比寬度和最大寬度百分比嗎？
沒有另一層divs，這可能嗎？
這有可能嗎？
#head { background-color: #00FF00; } body { text-align: center; } #container { margin: 0 auto; width: 100%; max-width: 500px; text-align: center; } #left { background-color: #FF0000; float: left; width: 50%; min-width: 150px; max-width: 100%; } #right { background-color: #0000FF; float: left; width: 50%; min-width: 150px; max-width: 100%; }
<div id="head"> foo </div> <div id="container"> <div id="left"> bar </div> <div id="right"> baz </div> </div>
2 個解決方案
解決方案1
0 2016-03-23 20:45:30
您可以使用flex和min-width： http : //codepen.io/anon/pen/JXNMgd
/* added */ #container { display: flex; flex-wrap: wrap; } #left, #right { flex: 1; } /* your css cleared a bit */ #head { background-color: #00FF00; } body { text-align: center; } #container { margin: 0 auto; max-width: 500px; text-align: center; } #left, #right { background-color: #FF0000; min-width: 150px; } #right { background-color: #0000FF; }
<div id="head"> foo </div> <div id="container"> <div id="left"> bar </div> <div id="right"> baz </div> </div>
解決方案2
0 已采納 2016-03-23 20:46:08
我認為您需要媒體查詢。 您可以為不同的視口設置寬度。
#head { background-color:#00FF00; } body { text-align:center; } #container{ margin: 0 auto; width:100%; max-width:500px; text-align:center; } #left { background-color:#FF0000; float: left; width: 50%; min-width: 150px; max-width: 100%; } #right { background-color:#0000FF; float: left; width: 50%; min-width: 150px; max-width: 100%; } @media (max-width: 500px) { #left { width: 100%;} #right { width: 100%;} }
<html> <head> </head> <body> <div id="head"> foo </div> <div id="container"> <div id="left"> bar </div> <div id="right"> baz </div> </div> </body> </html>
結合最小寬度和最大寬度
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.