我如何創建div元素，就像一張桌子邊框

我想知道..我怎樣才能使我的div元素像盒子，但沒有使用元素「表」邊框繪製。到目前爲止，我用的是表元素，但是當我在較長的句子，盒子本身擴大，這搞砸了我的設計：我如何創建div元素，就像一張桌子邊框

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

通常，中心柱擴大，以及，當文本躐列的寬度。我已經嘗試過將被隱藏的溢出屬性，但是再次，文本的其餘部分被剪切掉，而不是去換行。

我希望它像e107 CMS側面菜單。例如：

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

但我想他們正在使用一些圖像，並通過寫這個圖像文本。

編輯：我的代碼：jsfiddle.net/Xz8x4

來源

2014-06-15 Suat Husein

你應該把所有的內容放到一個指定寬度的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/

來源

2014-06-15 14:47:59 mihutz

我以類似的方式完成了它，但仍然無法工作，這裏是小提琴：http：// jsfiddle。net/Xz8x4/ –

這個盒子是固定的，非常感謝，但只剩下文本問題，它仍然在容器外面繼續，我怎麼能讓它去一個新的線它超過了它的限制？（我已經刪除溢出屬性，因爲它切割文本，否則..） –

word-wrap：break-word; http://jsfiddle.net/mihutz/Xz8x4/3/ – mihutz

問題是你沒有設置width財產可言。

設置width: 100px它會保持在它的極限。否則它是auto，瀏覽器會嘗試拉長它，直到所有的文本被包裝或者達到最右側。

來源

2014-06-15 14:38:45

我已經試過這幾次，還是沒有結果。 –

問題是，最右邊的列文本比它所具有的空間更長，所以您可以設置word-break: break-all;將該文本分成多行，儘管它沒有空格。

如果該列中的實際文本與其匹配或具有空格以便可以分成多行，那麼就沒有問題。

這3列布局被稱爲聖盃佈局。也許這可以幫助你：

來源

2014-06-15 15:43:26 Danziger

非常感謝！ –

我如何創建div元素，就像一張桌子邊框

回答

相關問題