Question

我想知道..我怎样才能使我的div元素像盒子一样，但不使用元素“table”进行边框绘制。到目前为止我使用的是表元素，但是当我的句子更长时，盒子本身就会变宽，这与我的设计相混淆：

http://postimg.org/image/qjp8u01ox/

通常，当文本超出列的宽度时，中间列也会变宽。我已经尝试将overflow属性隐藏起来，但是再一次，文本的其余部分被剪切，而不是去换行。

我希望它像e107 CMS侧面菜单。示例：

http://clanwebs.co.uk/images/codww.jpg

但我猜他们正在使用一些图像，并在此图像中写入文字。

编辑：我的代码：jsfiddle.net/Xz8x4

Answer 1

您应该将所有内容放入具有指定宽度的div中。我写了一个小例子来告诉你它是如何工作的。

的CSS：

.body{
    text-align:center;
    width:80%;
}

.left{
    float:left;
    width:20%;
}

.right{
    float:left;
    width:20%;
}

.center{
    float:left;
    width:60%
}

HTML：

<div class="body">
    <div class="left">
    test test test test test test test test test test test 
    </div>
    <div class="center">
    test test test test test test test test test test test 
    </div>
    <div class="right">
    test test test test test test test test test test test 
    </div>
</div>

演示：http://jsfiddle.net/mihutz/ba2eA/1/

你需要一个最大宽度：

#leftmenu td, #centercol td, #rightmenu td {
    color: #FFFFFF;
    text-align:center;
    overflow:hidden;
    max-width:1px;
}

演示：http://jsfiddle.net/mihutz/Xz8x4/2/

Answer 2

问题是你根本没有设置width属性。

设置width: 100px，它会保持在极限。否则它是auto并且浏览器会尝试延长它，直到所有文本被包装或最右边都被满足。

Answer 3

问题是最右边的列文本比它所拥有的空间长，所以你可以设置word-break: break-all;将该文本分成多行，尽管它没有空格。

如果该列中的真实文本在其中很好地适合或具有空格以便可以将其分成多行，那么就没有问题。

这个3列布局称为圣杯布局。也许这对你有帮助：

如何创建div元素，就像带边框的表格一样

3 个答案: