1

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

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

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

4

2 回答 2

2

如果我没记错的话，你希望这三个divs都存在于同一个地方而不是向下滚动。为此，您必须display:table-cell;在div-column课程中添加一个。这是工作解决方案。

的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;

}

希望这可以帮助。

于 2013-06-04T09:07:47.550 回答
0

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

max-width:250px;

JsFiddle

于 2013-06-04T09:13:46.113 回答