问题与环绕文字

我想用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

问题与环绕文字

回答

相关问题