如何從左向右浮動三個div？

我想我明白基本的左邊&正確的浮游物，但我無法弄清楚這個特定的三列布局。我甚至不確定我想要什麼是可能的。我想創建一個單排三分<格列>如下：如何從左向右浮動三個div？

最右邊的<DIV>接觸容器的右邊緣，包含NOWRAP文本，並在必要時是一樣寬。
中心<DIV>立即到最右邊的 <DIV>的左側，包含<IMG>，並在必要時是一樣寬。
最左邊<DIV>接觸容器的左邊緣，包含字換行的文本，並且使用說20％的最小寬度，但動態延伸到使用任何剩餘寬度是在容器中可用的。
如果（且僅當）三列的寬度之和大於容器的寬度，則應出現水平滾動條。我不希望這些<div>中的任何一個下移到下一行。

我遇到了麻煩＃3 &＃4。這可能嗎？我猜我需要最左邊的列，實際上是兩個<div> s（一個直接在另一個的上面），一個空的<div>，其他包裝文本上方/下方的寬度爲20％<div>未指定寬度，但我無法弄清楚如何做到這一點。

感謝，
Tom.III

來源

2015-02-07 Thomas Dwyer III

除非你想使用表設計佈局，我認爲你需要看看HTML 5 Flexbox的。看到這裏例如 - > http://css-tricks.com/snippets/css/a-guide-to-flexbox/。（因爲你有最小20％填充寬度等規則） – Andreas 2015-02-07 08:52:44

 <style> 
      #main{ 
       position: fixed; 
       top: 0; 
       left: 0; 
       width: 100%; 
       height: 100%; 
      } 
      #left{ 
       float: left; 
       max-width: 32%; 
       width: auto; 
       margin-right: 3px; 
       background-color: red; 
      } 
      #center{ 
       float: left; 
       max-width: 32%; 
       width: auto; 
       margin-right: 3px; 
       margin-left: 3px; 
       background-color: green; 
      } 
      #right{ 
       float: right; 
       max-width: 32%; 
       width: auto; 
       min-width: 20%; 
       background-color: blue; 
      } 
     </style> 
     <div id="main"> 
      This is the main div! 
       <div id="left"> 
        Hello From The Left! 
       </div> 
       <div id="center"> 
        Hello From The Center! 
       </div> 
       <div id="right"> 
        Hello From The Center! 
       </div> 
     </div>

來源

2015-02-07 09:23:58 Zexter

如何從左向右浮動三個div？

回答

相關問題