Question

我正在尝试用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解决方案。

Answer 1

在item类上设置其他两个样式：

white-space: nowrap;
overflow: hidden;

这应该可以解决问题。

Answer 2

您需要指定.item的高度。因为浮动元素总是将它们的高度设置为所需的最小值。因此，请将以下行添加到.item

height:<amount>px;

Answer 3

我可以想到的唯一解决方案是不使用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>

您希望将overflow:hidden应用于item-row以包含已浮动的项目。

包含文本的CSS布局问题

3 个答案: