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

Question

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

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

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

我希望它像 e107 CMS 侧边菜单。例子：

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

但我猜他们正在使用一些图像，并通过这个图像写文字。

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

score 1 · Accepted Answer

您应该将所有内容放入具有指定宽度的 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/

score 0 · Accepted Answer

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

设置width: 100px，它将保持在其极限内。否则，auto浏览器会尝试拉长它，直到所有文本都被换行或遇到最右侧。

score 0 · Accepted Answer

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

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

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

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

3 回答 3

Related

Reference