垂直邊界的css最小邊距

需要更改的代碼如下： 1）左列（紅色）至少寬200px，最寬20％ 2）「main」列（黑色）寬度至少爲400px，最寬爲80％ 3）列總是保持水平相鄰，「主」列永遠不會換行到新行？垂直邊界的css最小邊距

注：這似乎是其他「分利潤」型CSS的問題在這裏重複，但我已經經歷了幾無濟於事，比如這個：Using a percentage margin in CSS but want a minimum margin in pixels?

<html> 
<head> 
    <title>Margin Test</title> 
    <style> 
     #container { 
      display: table; 
      width: 100%; 
      background-color: green; 
     } 
     #left-column { 
      display: table-cell; 
      min-width: 200px; 
      width: 20%; 
      background-color: red; 
      float: left; 
     } 
     #main-column { 
      display: table-cell; 
      width: 80%; 
      background-color: black; 
      float: left; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div id="left-column"> 
      left 
     </div> 
     <div id="main-column"> 
      main 
     </div> 
    </div> 
</body>

來源

2014-01-05 Trindaz

你的邏輯是有缺陷的。如果容器的100％寬度小於600px寬度（即兩個寬度的總和）呢？這兩個元素不能是最大寬度的80％，沒有包裝... – BenM

@BenM然後一個水平滾動條將出現在瀏覽器窗口的底部 – Trindaz

@BuddhistBeast不，因爲如果你調整輸出窗口的大小，他們換行。 – BenM

http://jsfiddle.net/p2mdj/

這是你想要的嗎？我刪除了...

float: left;

，因爲表細胞自動找出答案，並增加了

min-width: 400px

到主股利。

它現在基本上是一個標準表，每個單元指定最小寬度。表格幾乎不會包裝他們的單元格，除非你做一些奇怪的東西（比如把浮標放在它們上面：P）

來源

2014-01-05 22:01:46

在7分鐘內可以接受。這解決了這個問題。那個jsfiddle鏈接是否意味着鏈接到一個特定的小提琴？或者你說在未來提問時我應該使用它？ – Trindaz

呃我更新了那個鏈接，它現在是一個特定的小提琴 –

垂直邊界的css最小邊距

回答

相關問題