Макет с плавающей точкой в ​​CSS

Question

У меня есть базовая схема отзывов, которую я разработал и закодировал. У меня возникли проблемы с корректной работой плавающих элементов. Проблема в том, что, поскольку верхний левый угол длиннее правого верхнего, третья кавычка вкладывается под правую сторону вместо левой. Если я уясню: оба на этом, то четвертая цитата выстраивается в линию с третьей вместо того, чтобы скрывать под второй цитатой. Я также подумал, что мог бы использовать базовый jQuery и добавить float: left для всех четных кавычек и float: right для всех нечетных, но это не сработало. Есть идеи?

Кроме того, я знаю, что могу просто переместить цитаты и заставить их работать. Проблема в том, что клиент будет продолжать добавлять кавычки, длина которых я не знаю, поэтому мне нужно, чтобы это работало даже в худшем из возможных сценариев. Спасибо за помощь!

Answer 1

Есть что-то вроде этого .

HTML:

<div id="column1">
    <div class="item">
       <!-- ITEM CONTENT -->
    </div>
    <div class="item">
       <!-- ITEM CONTENT -->
    </div>
    <div class="item">
       <!-- ITEM CONTENT -->
    </div>
</div>
<div id="column2">
    <div class="item">
       <!-- ITEM CONTENT -->      
    </div>
    <div class="item">
       <!-- ITEM CONTENT -->
    </div>
    <div class="item">
       <!-- ITEM CONTENT -->       
    </div>    
</div>
<div class="clear"></div>

CSS

#column1, #column2
{
    width: 48%;
}
#column1
{
     float: left;
}
#column2
{
    float: right;
}
.clear
{
    clear: both;
}
.item
{
    background: #FE63E4;
    margin: 10px 0;
}

Answer 2

У меня была такая же проблема, и я не мог найти решение своей проблемы. После многих часов попыток решить ее легко, я наконец создаю решение для себя. Это сделано в основном в JQuery, но я думаю, вы можете легко изменить его на другой JS Framework. Я не специалист по javascript, поэтому код, вероятно, не будет оптимизирован.

HTML (только для иллюстрации)

<ul id="nav">
  <li class="level-top">
    <a href="#"><span>Item 1</span></a>
    <ul class="level0">
      <li class="level1">
        <a href="#"><span>Item 2</span></a>
      </li>
      <li class="level1">
        <a href="#"><span>Item 3</span></a>
      </li>
    </ul>
  </li>
</ul>

CSS (только для иллюстрации)

ul#nav { display:block; }
li.level-top { position:relative; float:left; width:120px; height:50px; }
li.level-top a { display:block; height:50px; line-height:50px; }
ul.level0 {
  position:absolute;
  top:50px;
  left:0;
  padding:9px 0;
  border:3px solid #CCC;
  width:240px;
  display:none;
}
li.level-top:hover ul.level0 { display:block; }
li.level1 { position:absolute; width:120px; }
li.level1.odd { left:0; }
li.level1.even { right:0; }

JS Моя главная проблема решена здесь. Элемент UL с классом level0 обычно скрыт. Нам нужно вывести его за пределы экрана и установить верхнее позиционирование обоих столбцов, а затем вернуть его обратно.

(function($){ // start jquery
$(document).ready(function(){ // domready

$("#nav > li > ul > li:nth-child(odd)").addClass('odd'); // This add class="odd" to every odd li in ul.level0
$("#nav > li > ul > li:nth-child(even)").addClass('even'); // This add class="even" to every even li in ul.level0

$('ul.level0').each(function(index) { // get all ul elements with level0 class
  $(this).css('top', '-5000px').css('display', 'block'); // hide out of screen before changes and make display:block to possiblity of get heights of elements
  var topPadding = parseInt($(this).css('padding-top')); // get padding-top (only numeric value) of ul element

  var leftHeight = 0; // start left column from 0 (top position)
  $(this).children('li.level1.odd').each(function(index) { // get odd elements
    var $liOuterHeight = $(this).outerHeight(true); // get height of li element (height with padding, border and margin)
    $(this).css('top', (leftHeight+topPadding)+'px'); // set top position of li element
    leftHeight += $liOuterHeight; // modify height of left column
  });

  var rightHeight = 0; // start right column from 0 (top position)
  $(this).children('li.level1.even').each(function(index) { // get even elements
    var $liOuterHeight = $(this).outerHeight(true); // get height of li element (height with padding, border and margin)
    $(this).css('top', (rightHeight+topPadding)+'px'); // set top position of li element
    rightHeight += $liOuterHeight; // modify height of right column
  });

  $(this).height(rightHeight > leftHeight ? rightHeight : leftHeight).css('top', '').css('display', ''); // set height to ul element and change back all css changes (positioning + display)
});

}); // end of domready
})(jQuery); // end of jquery

Надеюсь, это кому-нибудь поможет. Это было сделано для меню, которое обычно было скрыто. Я думаю, вы можете изменить это для чего-то еще. Это не так сложно.

Answer 3

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

---

Поскольку кавычки могут быть любой высоты, я не верю, что существует универсальный метод CSS.

Тем более, что вы сказали:

Мне нужно, чтобы это работало даже в худшем из возможных сценариев.

Вместо этого следует использовать jQuery Masonry плагин.

Answer 4

См. Этот пример на jsfiddle: http://jsfiddle.net/e4abB/3/

<!--Left Column Boxes-->
<div style="width:50%; float:left">
  <div style="background-color:#f00; width:100%; height:50px;">left1</div>
  <div style="background-color:#0f0; width:100%;">left2</div>
  <div style="background-color:#00f; width:100%;">left3</div>
</div>

<!--Right Column Boxes-->
<div style="float:right; width:50%">
  <div style="background-color:#aaa; width:100%;">right1</div>
  <div style="background-color:#ff0; width:100%;">right2</div>
  <div style="background-color:#0ff; width:100%; height:40px;">right3</div>
</div>