Question

我有一个我设计和编码的基本推荐布局。我有一点麻烦让浮动元素正常工作。问题在于，因为左上角比右上角长，所以第三个引号位于右侧而不是左侧。如果我清除：两者都在上面，那么第四个引用与第三个引用对齐，而不是在第二个引号下面。我还以为我可以使用一些基本的jQuery并添加一个浮点数：左边的所有偶数引号和一个浮点数：右边所有的奇数，但是没有用。有什么想法吗？

另外，我知道我可以重新定位引号并使其正常工作。问题是客户端会不断添加我不知道长度的引号，因此我需要在最糟糕的情况下使其工作。谢谢你的帮助！

enter image description here

Answer 1

拥有something like this。

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框架。我不是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 我的主要问题在这里解决了类level0的UL元素通常是隐藏的。我们需要将它显示在屏幕外并设置两列的顶部位置，然后将其返回。

(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

在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>

Answer 4

看看其他答案，他们是对的。您可以使用服务器端代码将项目拆分为两个单独的列，没问题。当我写下答案时，我根本就没有考虑服务器端代码。

因为引号可能是任何高度，我不相信有一个通用的CSS方法可用。

特别是因为你说：

我需要让它工作即使在最糟糕的情况。

您应该使用jQuery Masonry插件。

enter image description here

CSS中的浮动布局

4 个答案: