如何創建類似於帶邊框表格的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的液體聖杯布局。