CSS中的浮动布局

我有我设计和编码的基本评论布局。我有一些麻烦让浮动元素正常工作。问题在于，因为左上角比右上角长，所以第三个引号嵌套在右侧而不是左侧。如果我清楚：都在上面，那么第四个报价与第三个报价排成一行，而不是在第二个报价下面打折。我也认为我可以使用一些基本的jQuery，并添加一个float：left到所有的偶数引号和一个float：right到所有的奇数，但是这并不起作用。有任何想法吗？CSS中的浮动布局

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

enter image description here

来源

2011-02-27 Andrew

即使有CSS选择器来执行此操作，您也可以使用JQuery将'float：left;'添加到even和'float：right'中，以便奇数：'.class：nth-of-type（even）;'或'.class：第n种类型（奇数）;' – 2011-02-27 22:01:23

有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; 
}

来源

2011-02-27 22:03:56

好吧，这可能会起作用，我想过有关列的问题，但是他们如何将它添加到CMS？即使您将不得不将它们添加到第1列然后第2列交替，您仍然能够吗？那有意义吗？ – Andrew 2011-02-27 22:06:55

@Andrew：你应该可以做到这一点。如果项目包含在数组中，则应该能够将数组分成两半，并将每列中的一半。 – 2011-02-27 22:08:47

查看的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>

来源

2011-02-27 22:02:07 TimFoolery

看着其他的答案，他们是对的。你可能使用你的服务器端代码将项目分成两个独立的列，没有问题。当我写回答时，我只是没有考虑服务器端代码。

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

特别是因为你说：

我需要使它即使在最坏情况的工作。

你应该改用jQuery Masonry插件。

enter image description here

来源

2011-02-27 22:06:33 thirtydot

我知道有这种事情的某种jQuery插件。我想我会向客户提供两种选择，一种是CSS列，另一种是jQuery Masonry。谢谢您的帮助！ – Andrew 2011-02-27 22:13:52

我有同样的问题，我无法找到我的问题的任何解决方案。经过几个小时的试图轻松解决，我终于为我创建了解决方案。它主要是用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 我的主要问题。具有级别0的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

我希望它有助于某人。这是为通常隐藏的菜单制作的。我想，你可以修改它来做其他事情。这并不难。

来源

2012-06-21 18:56:51 Stinek

CSS中的浮动布局

回答

相关问题