Как я могу горизонтально выровнять эти div в этих полях?

Это должно быть просто, но я не могу понять это. Ниже приведен пример моего кода. Я хочу, чтобы верхние два divs в каждом ящике выровнялись в верхней части, а нижние два divs в каждом ящике выровнялись в нижней части. По существу, вершины и основания выравниваются в каждой строке. Иногда у меня есть дополнительный длинный контент во втором div. Вот мой jsfiddle http://jsfiddle.net/APJX8/2/Как я могу горизонтально выровнять эти div в этих полях?

<table style="width:100%;"> 
    <tr> 
     <td style="width: 25%;"> 
      <div class="box" style="height:200px;"> 
       <div>top</div> 
       <div>this is an extra extra extra long line that wraps</div> 
       <div>right above bottom</div> 
       <div>bottom</div> 
      </div> 
     </td> 
     <td style="width: 25%;"> 
      <div class="box" style="height:200px;"> 
       <div>top</div> 
       <div>right underneath</div> 
       <div>right above bottom</div> 
       <div>bottom</div> 
      </div> 
     </td> 
     <td style="width: 25%;"> 
      <div class="box" style="height:200px;"> 
       <div>top</div> 
       <div>right underneath</div> 
       <div>right above bottom</div> 
       <div>bottom</div> 
      </div> 
     </td> 
     <td style="width: 25%;"> 
      <div class="box" style="height:200px;"> 
       <div>top</div> 
       <div>right underneath</div> 
       <div>right above bottom</div> 
       <div>bottom</div> 
      </div> 
     </td> 
    </tr> 
</table>

источник

2013-11-17 ScottG

Все идентификаторы на странице должны быть уникальными. Читайте о свойствах 'bottom' CSS и о том, как он работает с разными' position'. Это должно заставить вас начать. – Shomz

Зачем использовать таблицы? Почему бы не использовать два внешних div для строк, а затем отобразить верхнюю и правую под divs в первой строке и два других div в нижней строке? Довольно просто. – brouxhaha

изменил идентификаторы на классы. Не имеет значения для этого упражнения, но вы правы. – ScottG

Я не думаю, что это возможно без изменения HTML, по крайней мере немного.

Из того, что я могу сказать, у вас есть два варианта: 1. добавьте еще один div вокруг первых двух div, а другой вокруг нижних двух div. Установите второй на position: absolute; bottom: 0, а первый на position: absolute; top: 0;. Набор .box - position: relative;. Абсолютное позиционирование потребует установить высоту на .box, чтобы предотвратить совпадение абсолютных divs, если текст слишком длинный.

или 2. измените на использование двух разделителей для строк и используйте по четыре поля в каждом из них с соответствующими div в верхней и нижней строках. Вам не нужно беспокоиться об абсолютном позиционировании этого метода, и это будет тонкий уборщик.

источник

2013-11-17 02:04:48 brouxhaha

Спасибо за совет, я вижу, что вы говорите. Это случай, когда я пытаюсь быстро исправить чужой код, который имеет кучу стилей, применяемых к нему, поэтому не так просто просто переключить его. Но я попробую! – ScottG

Вы также можете использовать что-то похожее на # 2, добавив второй 'tr' для создания двух строк и переместите нижние два divs во второй' tr'. На самом деле это может быть чище/проще в зависимости от вашего фактического кода. – brouxhaha

это может помочь вам, и может изменить формат стиля, чтобы удовлетворить ваши потребности ... :)

<table style="width:100%;"> 
    <tr> 
     <td style="width: 25%;"> 
       <div class="box" style="height:200px; vertical-align:top;"> 
        <div style="float:left; width: 100%;">top</div> 
        <div style="float:left; width: 100%;">this is an extra extra extra long line that wraps</div> 
       </div> 
       <div style="vertical-align:bottom;"> 
        <div style="float:left; width: 100%;">right above bottom</div> 
        <div style="float:left; width: 100%;">bottom</div> 
       </div> 

     </td> 
     <td style="width: 25%;"> 
       <div class="box" style="height:200px; vertical-align:top;"> 
        <div>top</div> 
        <div>right underneath</div> 
       </div> 
       <div style="vertical-align:bottom;"> 
        <div>right above bottom</div> 
        <div>bottom</div> 
       </div> 
     </td> 
     <td style="width: 25%;"> 
      <div class="box" style="height:200px; vertical-align:top;"> 
        <div>top</div> 
        <div>right underneath</div> 
       </div> 
       <div style="vertical-align:bottom;"> 
        <div>right above bottom</div> 
        <div>bottom</div> 
       </div> 
     </td> 
     <td style="width: 25%;"> 
      <div class="box" style="height:200px; vertical-align:top;"> 
        <div>top</div> 
        <div>right underneath</div> 
       </div> 
       <div style="vertical-align:bottom;"> 
        <div>right above bottom</div> 
        <div>bottom</div> 
       </div> 
     </td> 
    </tr> 
</table>

источник

2013-11-17 03:21:19 Praveen

Как я могу горизонтально выровнять эти div в этих полях?

ответ

Смежные вопросы