我該如何解決這個3列布局？

所有列都被定義爲div。他們都在實施相同的CSS：

.div-column { 
    display:inline-block; 
    vertical-align: top; 
}

只要列的內容不是太寬，它們就像預期的那樣彼此相鄰。但最後一列包含一些帶有文本的div。如果這段文字太長，整列就不符合要求。

<div id=column3 class=div-column> 
    <div> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr.  
    </div> 
</div>

我希望文本包裝，如果它不適合在一行。我能做些什麼來確保文本的長度無關緊要？換句話說：我如何確保3列布局不會中斷？

重要提示：我不能使用列的固定寬度（寬度，最小寬度，最大寬度）！

非常感謝（希望簡單）的想法！

來源

2013-06-04 Ingmar

怎麼樣最大寬度？這仍然允許div更小，但是當它達到指定的值時，它不會變大。最大寬度：250像素; –

@Marco：我只是設置了一個簡單的測試場景。你的修復效果很好！但是：我不能用固定寬度（或最大寬度）工作。我希望有一個解決方案，可以避免... – Ingmar

我爲你建立一個jsfiddle，虐待包含我的解決方案的答案。 –

如果我沒有錯，你想要所有的三個divs存在於同一個地方，而不是向下滾動。爲此，您必須將display:table-cell;添加到div-column課程中。這是Working Solution。

的HTML：

<div id=column3 class=div-column> 
    <div> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr.  
    </div> 
</div> 

<div class=div-column> 
    <div> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr.  
    </div> 
</div> 

<div class=div-column> 
    <div> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr.  
    </div> 
</div>

的CSS：

希望這有助於。

來源

2013-06-04 09:07:47 Nitesh

您的第二個解決方案適用於我的場景。非常感謝。你真的做了我的一天。 – Ingmar

不客氣。更新了答案 - @IngmarBode – Nitesh

max-width怎麼樣？這仍然允許div更小，但是當它達到指定的值時，它不會變大。

max-width:250px;

The JsFiddle

來源

2013-06-04 09:13:46

我該如何解決這個3列布局？

回答

相關問題