0

私はこのhtmlコードとスタイルを持っています「これは単なる例です」:

<div id="mn" style="margin-top:200px;">
                <div class="first">1</div>
                <div class="second">2</div>
                <div class="third">3</div>
                <div class="fourth">4</div>
            </div>

<style type="text/css">
        #mn, #mn div { display:inline-block; vertical-align:middle; }
        #mn div { width:350px; margin:5px; /* float:left Comment */ }
        div.first { height:5px; background-color:Red; }
        div.second { height:120px; background-color:#999 }
        div.third { height:50px; background-color:Yellow }
        div.fourth { height:180px; background-color:#ccc }
    </style>

問題は、左側の「黄色と赤の要素」の要素の間に、これらの間に大きなスペースまたは下の余白があることです。この大きな余白または間隔を削除し、すべての要素で 5px だけを使用する必要があります。

リストを取得してそれらをdivに移動するjqueryを使用したスクリプトを作成しました。

<div id="mn_left"></div>
            <div id="mn_right"></div>
            <div id="mn" style="margin-top:200px;">
                <div class="first">1</div>
                <div class="second">2</div>
                <div class="third">3</div>
                <div class="fourth">4</div>
            </div>

$(document).ready(function () {            
            $("div", "#mn").each(function (e, value) {
                if ($("#mn_left").height() <= $("#mn_right").height()) {
                    $("#mn_left").append(value.outerHTML);
                }
                else {
                    $("#mn_right").append(value.outerHTML);
                }
            });
        });

スクリプトは問題なく動作しますが、スクリプトなしで実行したいと考えています。

編集... 私は間違って、divでliを変更しました...しかし、それはまったく同じです。Html は次のようになります。

http://postimg.org/image/dh6dwdjc1/

私が本当に欲しいのはこれです

http://postimg.org/image/otnkrwhep/

4

3 に答える 3

0

これはどう？絶対配置の代わりにフロートを使用します。

#mn {width: 720px;}
#mn div { width:350px; float:left; margin:5px; }
#mn div.second {float:right;}
div.first { height:5px; background-color:Red; }
div.second { height:120px; background-color:#999; }
div.third { height:50px; background-color:Yellow }
div.fourth { height:180px; background-color:#ccc }
  • すべて左に浮かびました。
  • divを含むための 新しい CSS ルールを追加しました#mn。幅は、各子 div の幅にマージンを加えたものに等しいので、( 5px + 350px + 5px ) = ( 360px x 2 ) = 720px.
  • 2 番目の div に新しい CSS 宣言を追加しました。
于 2013-07-03T18:59:06.033 に答える
0

あなたが何をしようとしているのかを理解した今...

これを行う 1 つの方法は、2 番目の列にある項目のクラスを作成することです。

#mn .col2 { position: absolute; left: 355px; top:0; margin-top: 0;}

JSFiddle の例。（PS、上記が機能する必要があります#mn{position:relative;}。）

これに関する問題は、2 番目の列に複数の項目がある場合、2 番目 (および 3 番目、4 番目など) の項目にカスタムtop位置を指定して、適切に整列させる必要があることです。

これは、CSS の代わりに Javascript を使用するのに最適な場所のようです。これは、「できる限り常に CSS を使用してください!」の支持者から来ています。

于 2013-07-03T21:08:40.463 に答える
0

まず、リストだと言ったので、リストマークアップを使用して適切に設定されたコードを次に示します。

HTML:

<ul id="mn">
    <li class="first">1</li>
    <li class="second">2</li>
    <li class="third">3</li>
    <li class="fourth">4</li>
</ul>

CSS:

#mn {padding:0; margin:0;}
#mn, #mn li { display:inline-block; vertical-align:middle; }
#mn li { width:350px; margin:5px; }
li.first { height:5px; background-color:Red; }
li.second { height:120px; background-color:#999 }
li.third { height:50px; background-color:Yellow }
li.fourth { height:180px; background-color:#ccc }

次に、marginから削除し#mn liます：

#mn li { width:350px; /* margin:5px; */ }

行の高さが項目の高さよりも高い最初の項目を除いて、リスト項目が平らになっていることがわかります。最初のものを修正するには、リスト項目に を付けて、 fromを just にoverflow:hidden;変更します。displayinline-blockblock

#mn, #mn li { display:block; vertical-align:middle; }
#mn li { width:350px; overflow: hidden;}

私が誤解していない限り、これで終わりです。

于 2013-07-03T18:56:17.867 に答える