CSS дисплей: встроенный; float: left, но блоки div не остаются близко друг к другу - PullRequest
Новая
       20

CSS дисплей: встроенный; float: left, но блоки div не остаются близко друг к другу

0 голосов
/ 01 марта 2010

Кто-нибудь знает, как заставить Блок 3 не переходить под Блок2? Я бы хотел, чтобы блок 3 отображался в блоке 1, а блок 4 затем шел бы справа от блока 3. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head>   
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <!-- don't use closing slash in meta tag, it breaks HTML4.01 transitional -->
   <title>Test</title>

   <style type="text/css">      
      /* in the style below the width and border and margin must not be modified */
      div.float_box {display: inline; float: left; width: 100px; border: 1px solid #ff0000; margin: 10px;}
      p.clear {clear: both; height: 0px;}
   </style>

</head><body>

   <!-- This outside div must not be touched or modified -->
   <div style="width: 300px; padding: 10px; border: 1px dashed #cccccc;">
      <!-- Blocks' height must not be modified by adding contents or setting styles -->
      <div class="float_box">Block 1<br><br><br><br><br></div>
      <div class="float_box">Block 2<br><br></div>
      <div class="float_box">Block 3<br><br><br><br><br><br><br><br></div>
      <div class="float_box">Block 4<br><br></div>
      <p class="clear"></p>
   </div>   

</body></html>

Спасибо! * * 1004

Это, очевидно, только пример, но Мне нужно решение, которое работает одинаково от длины блоков и независимо от количества блоков. Кто-то предложил использовать «clear: both» в блоке 3, но это решило бы только этот конкретный случай: что если бы у меня был другой блок 5 такой же высоты или длиннее, чем в блоке 3, а после другого блока 6 проблема возникла бы снова и чтобы исправить это, я должен был бы установить вручную очистить оба блока 5. Мне нужно общее решение, потому что я заранее не знаю длины и количества блоков (потому что они динамически генерируются из БД).

Я бы хотел, чтобы все мои блоки отображались один рядом с другим (разделенный просто установленным полем 10xp) при установке в внешний блок div 300px. Более того, внешняя ячейка div размером 300px может расширяться, и блоки внутри нее должны сами менять положение адаптируясь к новому размеру (например, помещаясь в три / четыре столбца).

Ответы [ 2 ]

2 голосов
/ 01 марта 2010

Вы должны иметь возможность добавить еще один класс («очистить»?) К блоку Div 3 с определением: 

div.clear { clear:both; }

Конечно, CSS не всегда ведет себя так, как вы изначально ожидали ...

0 голосов
/ 01 марта 2010

Я изменил класс block3 на это (добавлено clear: left;), и это даст вам результат, который вы искали. 

div.block3 {display: inline; float: left; width: 100px; border: 1px solid #ff0000; margin: 10px; clear:left;}

EDIT: Поскольку в настоящее время известно, что это динамически генерируемый сценарий из-за прояснения вопроса, решение состоит в том, чтобы подсчитать общее количество блоков, которые необходимо будет генерировать во время выполнения, а затем добавить атрибут clear в случае необходимости. Если вы не можете узнать, сколько у вас будет блоков, прежде чем создавать HTML, вы не сможете заставить работать макет.

Например, если у вас есть пять блоков, вам придется добавить четкие атрибуты в поля 3 и 5, чтобы убедиться, что они очищают своих левых соседей (в случае решения с двумя столбцами).

Если поле может расширяться и меняться на три или четыре столбца, то у вас есть другие проблемы. Вы действительно не можете иметь как фиксированный макет, так и расширяемый макет в случае, когда вы пытаетесь расположить столбцы.

...