問題與環繞文字

我想用CSS佈局來代替某些佈局表格佈局，並有這段代碼的CSS佈局：問題與環繞文字

<html> 
<head> 
<style type="text/css"> 
    #grid{ 
    border:solid; 
    border-width:1px; 
    border-color:#000000; 
    width:300px; 
    max-width:300px; 
    min-width:300px; 
    overflow:hidden; 
    font-size:14px; 
    } 

    #grid .item{ 
    text-align:center; 
    width:33%; 
    margin-top:2px; 
    margin-bottom:2px; 
    float:left; 
    } 
</style> 
</head> 
<body> 
<div id="wagerStream"> 
    <div id="grid"> 
    <div class="item">item1</div> 
    <div class="item">item2</div> 
    <div class="item">item3</div> 
    <div class="item">item4</div> 
    <div class="item">item5</div> 
    <div class="item">item6</div> 
    <div class="item">item7</div> 
    <div class="item">item8</div> 
    <div class="item">item9</div> 
    </div> 
    <div id="grid"> 
    <div class="item">item1</div> 
    <div class="item">item2</div> 
    <div class="item">item3</div> 
    <div class="item">item4 with wrapping text</div> 
    <div class="item">item5</div> 
    <div class="item">item6</div> 
    <div class="item">item7</div> 
    <div class="item">item8</div> 
    <div class="item">item9</div> 
    </div> 
</div> 
</body> 
</html>

正如你可以看到我有一個問題的方式，最後三個項目當包裝文本發生時顯示，並想知道什麼是一個很好的CSS解決方案。

來源

2010-05-19 Dan

你不能有id =「grid」的兩個元素。另外，根據你想表達的內容，看起來你有嚴重的Divitus案例。 – roryf 2010-05-19 15:47:50

一套額外的兩種風格上item類：

white-space: nowrap; 
overflow: hidden;

這應該做的伎倆。

來源

2010-05-19 15:24:56

謝謝，這是有效的，但有沒有辦法保持文本，並使項目5和項目6增加高度匹配項目4的呢？ – Dan 2010-05-19 15:31:38

不幸的是，沒有沒有javascript或包裝行在一起。 – 2010-05-19 15:44:36

好吧，我想我會使用JavaScript來設置其他元素高度等於最大的。 – Dan 2010-05-19 15:46:44

您需要指定高度爲.item。因爲浮動元素總是將其高度設置爲他們需要的最小值。所以，下面的行添加到您的.item

height:<amount>px;

來源

2010-05-19 15:36:15 Kevin

我能想到的唯一的解決方案，而無需使用JavaScript和不指定一組高度您的項目，是每3個項目包裝成一排。

<div id="grid"> 
    <div class="item-row"> 
     <div class="item">item1</div> 
     <div class="item">item2</div> 
     <div class="item">item3</div> 
    </div> 
    <div class="item-row"> 
     <div class="item">item4 with wrapping text</div> 
     <div class="item">item5</div> 
     <div class="item">item6</div> 
    </div> 
    <div class="item-row"> 
     <div class="item">item7</div> 
     <div class="item">item8</div> 
     <div class="item">item9</div> 
    </div> 
</div>

你會希望有應用於item-rowoverflow:hidden以包含浮動元素。

來源

2010-05-19 15:40:11

問題與環繞文字

回答

相關問題