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中的浮動佈局

回答

相關問題