Загрузочный лоток: как сделать «рядок» с плавающими элементами?

Question

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

В настоящее время мой HTML это:

<div class="row"> 
<div class="span1" style="background-color: #FF0000"> 
    First column with single row goes here 
</div> 
<div class="span11"> 
    <div class="row"> 
     <div class="span12" style="background-color: #00FF00"> 
      First row of second column goes here 
     </div> 
    </div> 
    <div class="row"> 
     <div class="span12" style="background-color: #0000FF"> 
      Second row of second column goes here 
     </div> 
    </div> 
</div> 

Теперь у меня есть проблема: Сингл-греб колонна не охватывает более двух строк второго столбца. Он имеет ту же высоту, что и первая строка, и имеет под ним пробел с той же высотой, что и вторая строка.

Как я могу растянуть эту ячейку по обеим строкам?

Answer 1

Я думаю, вы думаете об этом неправильно, используя концепцию таблиц/строк для применения к контейнерам div. На самом деле они не работают.

Вы можете сделать это с помощью CSS.

Добавить float: left; для всех ваших контейнеров или классов div.

Добавьте margin-left:100px; в свои стили, которые вы хотите в колонке 2. Это оттолкнет их от первой колонки.

Добавить height:100px; в левую колонку div, чтобы придать ей фиксированную высоту.

Вы можете набрать все это так.

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

Answer 2

Я думаю, что это будет работать, как вы хотите:

<div style="background-color: #FF0000"> 
    First column with single row goes here 
</div> 
<div style="background-color: #00FF00; width:50%; float:left;"> 
    First row of second column goes here 
</div> 
<div style="background-color: #0000FF; width:50%; float:left;"> 
    Second row of second column goes here 
</div> 

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

Я установил ширину столбцов на 50%. Если вы хотите получить другую ширину, измените эти значения. Просто убедитесь, что сумма равна 100.

Я также удалил некоторый HTML-код, который я не считаю необходимым. По крайней мере, насколько я понимаю ваш вопрос.