左右浮动奇数和偶数元素

问题出在这里。我简单的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

左右浮动奇数和偶数元素

回答

相关问题