3

これが問題です。シンプルな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 をページの左側に次々と配置し、間隔を空けずに、右側にすべての脇を配置したいと考えています。そして、そこにあります。asides のコンテンツがどれほど高くても、div は正常に機能しています。しかし、任意の div のコンテンツが高すぎる場合、この div と一緒に clear:both のようなものがあったように、サイド間に空のスペースができます。

例：

ここに画像の説明を入力

空のスペースがまったくないように、常に次のように表示する必要があります。ここに画像の説明を入力

html (divs&asides の順序) を変更することはできません。変更できるのは CSS だけです。html5 と css3 を使用できます。

http://jsfiddle.net/HRp2H/

4

3 に答える 3

3

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-07T14:24:43.223 に答える
0

JQuery組積造を使用してみてください。すべてのDIVブロックをきれいに積み重ねることができます

于 2013-03-07T16:27:59.910 に答える
0

このフィドルをチェックしてください：

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

css ハックを利用して、浮動列を同じ高さにします。

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

その後

overflow: hidden;

メインdivで

于 2013-03-07T14:28:48.113 に答える