CSS: два столбца

Если вы избавитесь от клиров, все будет нормально. Похоже, что по какой-то причине посередине есть какое-то перекрытие (ошибка округления?).

Вы пытаетесь разделить входной поток на два независимых потока, и я не думаю, что CSS позволяет вам это сделать. Использование левого и правого поплавков - отличная идея, но она не всегда работает. Спецификация CSS говорит в правиле 5 9.5.1:

The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

Итак, ваши поплавки могут прыгать влево, вправо и вниз, но не вверх.

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

Обновлено: в комментариях я сказал, что не ожидаю, что CSS3 будет поддерживать такую ​​функцию, потому что она нарушает разделение содержимого и макета. Позже я вспомнил, что CSS3 планирует добавить сноски. Итак, если вы пометите некоторые из ваших div с помощью «float: note», выбранные div переместятся в отдельную область «сноски» страницы. Думаю, вы можете разместить их справа от остальной части макета.

В Firefox 3 у меня работает следующее:

div {
  width: 198px;
  border: 1px solid black;
}
div.onediv, div.tendiv, div.xyzdiv { float: right; }
div.twodiv, div.abcdiv, div.pqrdiv { float: left; }

<div style = "width: 400px;">
  <div class = "onediv"><p>One name</p> <textarea id = "one"></textarea></div>
  <div class = "twodiv"><p>Two name</p> <textarea id = "two"></textarea></div>
  <div class = "tendiv"><p>Ten name</p> <textarea id = "ten"></textarea></div>
  <div class = "abcdiv"><p>Abc name</p> <textarea id = "abc"></textarea></div>
  <div class = "xyzdiv"><p>Xyz name</p> <textarea id = "xyz"></textarea></div>
  <div class = "pqrdiv"><p>Pqr name</p> <textarea id = "pqr"></textarea></div>
</div>

Просто небольшое примечание: размещение div внутри имени вашего класса (например, abcdiv) немного избыточно и странно. Не вдаваясь в громкую обличительную речь о правильном использовании классов, я бы не стал это делать.

Вы действительно можете упростить свой код, если просто скажете «col1» и «col2». Таким образом, вы даже можете поменять столбцы позже, если захотите:

div {
  width: 198px;
  border: 1px solid black;
}
div.col1 { float: right; }
div.col2 { float: left; }

<div style = "width: 400px;">
  <div class = "col1"><p>One name</p> <textarea id = "one"></textarea></div>
  <div class = "col2"><p>Two name</p> <textarea id = "two"></textarea></div>
  <div class = "col1"><p>Ten name</p> <textarea id = "ten"></textarea></div>
  <div class = "col2"><p>Abc name</p> <textarea id = "abc"></textarea></div>
  <div class = "col1"><p>Xyz name</p> <textarea id = "xyz"></textarea></div>
  <div class = "col2"><p>Pqr name</p> <textarea id = "pqr"></textarea></div>
</div>

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

<table>
    <tr>
        <td>
            <p>One name</p> <textarea id = "one"></textarea>
        </td>
       <td>
            <p>XYZ name</p> <textarea id = "xyz"></textarea>
        </td>
    </tr>
   ....
 </table>

Выравнивание отлично работает со всеми браузерами.

Таблицы - вполне приемлемое решение для этого ИМХО.

Противодействие таблицам было направлено на их использование для всего макета сайта. Но если вам нужно отображать данные в строках и столбцах ... вот для чего были созданы таблицы :)

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

http://www.blueprintcss.org/ - отличный фреймворк ИМХО.

Может быть, вы можете использовать абсолютное позиционирование? Конечно, это зависит от остальной структуры вашей страницы, но часто это вполне жизнеспособно.

У вас есть Javascript - почему бы не использовать его?

Вы сказали это:

These divs are generated dynamically if the browser has Javascript, and I don't want to change the actual order that is displayed in the absence of Javascript, for semantic reasons...

Вы показываете эти <div> только в том случае, если у пользователя есть Javascript - почему бы не использовать Javascript для их перестановки?. Если вы переместите # 4 на место после # 5, это будет хорошо выглядеть с вашим текущим CSS.

Итак (с jQuery):

$("div:eq(3)").remove().insertAfter("div:eq(4)");

Я оставлю остальную часть этого ответа на месте, чтобы кто-то другой мог видеть мои первоначальные мысли, но этот подход на самом деле не работает и требует, чтобы всегда было больше плавающих элементов, чем ни одного плавающего.

Думаю, это ваше решение (не проверено).

.left { width: 51%; float: left; }
.right { width: 49%; }

51% не позволяет им плавать рядом друг с другом, а затем просто позволяют всему контенту .right обернуться вокруг этих плавающих блоков.

Менее частое мышление дает больше с HTML / css, и опять же - НЕТ при использовании таблиц для макета.

=== [править] ===

Я провел тест на этом, и он действительно работает с парой настроек, И если вы знаете, что первый элемент плавает влево (или вправо, чтобы изменить поведение).

<style>
  div div { text-align: center; padding: 20px 0; overflow: hidden; }
  .left { width: 251px; float: left; background: red; }
  .right { width: 249px; background: green; }
</style>
<div style = "width: 500px;" >
  <div class = "left"> <p>1</p> </div>
  <div class = "right">  <p>2</p> </div>
  <div class = "left">  <p>3</p> </div>
  <div class = "left">  <p>4</p> </div>
  <div class = "right"> <p>5</p> </div>
  <div class = "right"> <p>6</p> </div>
</div>

Я чувствовал себя виноватым, что чистый метод css не работал, но если вы не против использовать JavaScript, чтобы получить то, что вам нужно, то вот какой-то jQuery, который будет работать (кто-то другой, вероятно, сможет очистить это для вы, если вам не нравится раздувание).

<style>
  #container { width: 500px; border: 1px grey solid; overflow: hidden; }
  #container .rightSide { width: 250px; float: right; }
  #container .left { width: 250px; background: red; padding: 20px 0; overflow: hidden; text-align: center; }
  #container .right { width: 250px; background: green; padding: 20px 0; overflow: hidden; text-align: center; }
</style>
<script type = "text/javascript">
$(document).ready(function() {
  $('#container').prepend('<div class = "rightSide"></div>');
  $('#container div.right').each(function() {
    var $rightContent = $(this).remove().html();
    $('.rightSide').append('<div class = "right">' + $rightContent + '</div>');
  });
});
</script>
<div id = "container" >
  <div class = "right"> <p>1</p> </div>
  <div class = "left">  <p>2</p> </div>
  <div class = "left">  <p>3</p> </div>
  <div class = "left">  <p>4</p> </div>
  <div class = "right"> <p>5</p> </div>
  <div class = "right"> <p>6</p> </div>
</div>

Решение 1

Если вы можете позволить себе дублировать HTML:

.left-column .right, .right-column .left {
    display: none;
}

Решение 2

Подождите немного, пока браузеры не поддержат CSS3:

.right {
    position: flow(side); 
}

Решение 3

Если ваши div имеют одинаковую высоту, используйте косвенный комбинатор смежных братьев и сестер. Несмотря на то, что он принадлежит к уровню CSS 3, это уже хорошо поддерживается:

.container {
    position: relative;
}

.left, .right {
    position: absolute;
    top : 0;
    width: 50%;
} 

.left {
    left: 0;
}

.right {
    left: 50%;
}

.left ~ .left, .right ~ .right {
    top : 100px;
}

.left ~ .left ~ .left, .right ~ .right ~ .right {
    top : 200px;
}

.left ~ .left ~ .left ~ .left, .right ~ .right ~ .right ~ .right {
    top : 300px;
}

... /* you need to include as many rules as the maximum possible height */

Проверьте 960 Сетка. Я использовал это в проектах в прошлом, и я должен сказать, что он работает довольно хорошо. Мало того, он прост в использовании и совместим во всех браузерах: D

Используя эту структуру:

<html>
    <head>
        <link rel = "stylesheet" type = "text/css" media = "all" href = "css/reset.css" />
        <link rel = "stylesheet" type = "text/css" media = "all" href = "css/text.css" />
        <link rel = "stylesheet" type = "text/css" media = "all" href = "css/960.css" />
     </head>
     <body>
     <div class = "container_16">
         <div class = "grid_1 alpha" style = "text-align:center;">
            2
         </div>
         <div class = "grid_1 omega" style = "text-align:center;">
            1
         </div>
         <div class = "clear"></div>
         <div class = "grid_1 alpha" style = "text-align:center;">
            4
         </div>
         <div class = "grid_1 omega" style = "text-align:center;">
            3
         </div>
         <div class = "clear"></div>
         <div class = "grid_1 alpha" style = "text-align:center;">
            5
         </div>
         <div class = "grid_1 omega" style = "text-align:center;">
            4
         </div>
    </div>
</body>
</html>

альтернативный текст http://img40.imageshack.us/img40/6889/cd3cc920a04b80e06b8efef.png

Полоса над текстом принадлежит моему браузеру, а не является частью CSS или макета.