Question

我有一个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列布局不会破坏？

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

非常感谢（希望很简单）的想法！

Answer 1

如果我没有错，你希望所有三个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：

.div-column {
    display:table-cell;
    vertical-align: top;

}

希望这有助于。

Answer 2

最大宽度怎么样？仍然允许div更小但当它达到指定时它不会变大。

max-width:250px;

The JsFiddle

如何修复此3列布局？

2 个答案: