html - 如何创建类似于带边框的表格的 div 元素

Question

我想知道.. 我怎样才能让我的 div 元素像盒子一样，但不使用元素“表格”来绘制边框。到目前为止，我一直在使用表格元素，但是当我有更长的句子时，框本身变宽了，这搞砸了我的设计:

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

通常，当文本超过列的宽度时，中心列也会加宽。我已经尝试 overflow hidden 属性，但话又说回来，文本的其余部分被剪切，而不是换行。

我希望它像 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/