Проблема с макетом CSS с переносом текста - PullRequest
Новая
       16

Проблема с макетом CSS с переносом текста

0 голосов
/ 19 мая 2010

Я пытаюсь заменить некоторые раскладки таблиц раскладок на раскладки 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.

Ответы [ 3 ]

0 голосов
/ 19 мая 2010

Вам нужно будет указать высоту до .item. Потому что плавающие элементы всегда устанавливают свою высоту на минимум, который им необходим. Итак, добавьте следующую строку в ваш .item

height:<amount>px;
0 голосов
/ 19 мая 2010

Единственное решение, которое я мог бы придумать без использования 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 для хранения всплывающих предметов.

0 голосов
/ 19 мая 2010

установить два дополнительных стиля для item класса: 

white-space: nowrap;
overflow: hidden;

Это должно сработать.

...