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

Question

我想知道..如何使我的div元素像盒子一样，却不使用元素“ table”进行边框绘制。 到目前为止，我使用的是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; 将文本分成多行，尽管没有空格。

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

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

• 流动（和固定宽度）Holy Grail布局代码示例（HTML和CSS）。
• 使用Flexbox的液体圣杯布局。