左右浮動奇數和偶數元素

問題出在這裏。我簡單的HTML模板：左右浮動奇數和偶數元素

<div class="wrapper"><div class="inside"> 

    <div class="left"><p>Lorem ipsum...</p></div> 
    <aside><p>Lorem ipsum...</p></aside> 
    <div class="left"><p>Lorem ipsum...</p></div> 
    <aside><p>Lorem ipsum...</p></aside> 
    <div class="left"><p>Lorem ipsum...</p></div> 
    <aside><p>Lorem ipsum...</p></aside> 

</div></div>

而且簡單的CSS：

div.wrapper {width:1020px;margin:0 auto;} 
div.wrapper .inside {padding: 10px;} 
div.left {width:700px;background:#EEE;float:left;border-top:1px solid #000; clear: left;} 
aside {width:300px;background:#CCC;float:right;border-top:1px solid #000; clear: right;}

我想所有div要對網頁，一個又一個的左側，沒有任何間隔，並在所有旁白正面。就在那裏。無論旁邊的內容有多高，divs工作正常。但是，如果任何div的內容太高，我會在旁邊留下空白區域，就像清晰的東西一樣：都與這個div一起。

例子：

enter image description here

我希望它總是這個樣子，沒有空的空間責任： enter image description here

我不能改變HTML（div的&旁白順序），我只能更改CSS 。我可以使用html5和css3。

http://jsfiddle.net/HRp2H/

來源

2013-03-07 Ecnelis

是的，由於HTML結構，浮動對你來說不起作用。你需要一個不同的解決方案。 JavaScript（jQuery）是一個選項嗎？ – isherwood 2013-03-07 14:13:38

你完全不能改變html或者只是順序？ – Michael 2013-03-07 14:20:00

而不是浮動所有的單個元素，你最好有左和右包裝，並將元素放置在包裝中。所以只有這兩個包裝紙是浮動的，而不是所有的DIV和Asides。 – 2013-03-07 14:20:56

你可以添加一個CSS梯度來模擬全列：

http://jsfiddle.net/HRp2H/5

div.wrapper { 
    width:400px; 
    margin:0 auto; 
    padding: 10px; 
} 
div.wrapper .inside { 
    background: -moz-linear-gradient(left, #eee 250px, #ccc 250px); 
    overflow: auto; 
} 
div.left { 
    width:250px; 
    float:left; 
    border-top:1px solid #000; 
    clear: left; 
} 
aside { 
    width:150px; 
    float:right; 
    border-top:1px solid #000; 
    clear: right; 
}

在這裏，我感動的是你對.inside其子元素的填充： http://jsfiddle.net/HRp2H/3

更新：這裏是你如何使用jQuery來做到這一點。我會用我較早的答案作爲後備。

http://jsfiddle.net/HRp2H/7/

.leftCol, .rightCol {float: left;} 
.leftCol .left, .rightCol aside {display: block} 
div.left { 
    display: none; 
    ... 
} 
aside { 
    display: none; 
    .. 
} 

var myLefts = $('.inside').clone().find('aside').remove().end().html(); 
var myAsides = $('.inside').clone().find('.left').remove().end().html(); 

$('.wrapper .inside').html(''); 

$('.wrapper .inside').append('<div class="leftCol" />'); 
$('.wrapper .leftCol').append(myLefts); 

$('.wrapper .inside').append('<div class="rightCol" />'); 
$('.wrapper .rightCol').append(myAsides);

來源

2013-03-07 14:24:43 isherwood

「白色」不是問題。 ;）空的空間是。 – Ecnelis 2013-03-07 14:28:47

對不起。如果是這樣的話，那麼你運氣不好。雖然你沒有回答我先前關於JavaScript的問題。 – isherwood 2013-03-07 14:32:06

哦，對不起。 JS可能是一個選項，但非常簡單而有效的一個... – Ecnelis 2013-03-07 14:35:52

入住這撥弄出來：

http://jsfiddle.net/HRp2H/4/

它利用CSS破解，使浮動列相同的高度：

margin-bottom: -500px; 
padding-bottom: 500px; 
overflow: hidden;

然後

overflow: hidden;

主DIV

來源

2013-03-07 14:28:48 James

不錯！填充將其丟棄10px，但這也適用。 – isherwood 2013-03-07 14:30:46

它正在研究「白色」空間，但我希望擺脫任何空白空間。對不起以前的困惑。 – Ecnelis 2013-03-07 14:40:30

嘗試使用。它可以將所有DIV塊堆疊在一起整齊排列在一起

來源

2013-03-07 16:27:59

左右浮動奇數和偶數元素

回答

相關問題