html - CSS 要素の配置

Question

たとえば、同じ「レベル」に2つのdivを配置しようとしています: ------ ---------- |Eelem 1| |要素 2 | -------- ---------- しかし、これまでのところ elem1 は elem2 の上にあります。関連するコードを追加しましたが、修正するにはどうすればよいですか?

事前に感謝しますc

 <div class="stats">The expression <b>football</b> appeared 47 times in 44 different status messages</div><div class='hideDiv'><p class='toggleStats'>Hide Stats</p></div>run time is9.6276791095734 
            <div class="dropStatus">
                <p class="dropHeader">Drag , Drop & Share !</p>
                <p class="droppedStatus"><button class="clear" style="display:none">clear</button></p>
            </div>



.stats{
    margin-left : 20px;
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius : 12px;
    font-size: 15px;
    text-align: center; 
}


.dropStatus {
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius: 12px;
}

.dropHeader{
    font-size : 25px;
    text-align: left;
}

.droppedStatus{
    font-size : 15px;
    text-align: left;
}

score 1 · Accepted Answer

次の 2 つのオプションがあります。

.stats{
    margin-left : 20px;
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius : 12px;
    font-size: 15px;
    text-align: center; 
    display: inline; /* You can also use inline-block but might be problematic with ie*/
}


.dropStatus {
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius: 12px;
    display: inline; /* You can also use inline-block but might be problematic with ie*/
}

または：

.stats{
    margin-left : 20px;
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius : 12px;
    font-size: 15px;
    text-align: center; 
    float: left; /* added this */
}


.dropStatus {
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius: 12px;
    float: left; /* added this*/
}

フロートは少しトリッキーな場合があることに注意してください。詳細については、こちらをご覧ください。

score 1 · Accepted Answer

あなたの問題は、要素がブロック要素divと呼ばれるという事実にあります。これは、デフォルトの動作を防止し、代わりにまたは要素のように動作させる CSS ルールを適用する必要があることを意味します。inlineinline-block

display:inline-block;これらのブロック要素にスタイリングルールを適用することで、代わりにブロックのように動作し始めますが、インラインです! (これは多くの場合非常に便利です。)

vertical-align:topただし、これらの要素を適切に整列させるために、これらの要素にも追加する必要がある場合があることに注意してください。

また、inline-block以前のバージョン (6 および 7 など) では完全にサポートされていませんInternet Explorer。この問題を回避するには、ルールを追加することもできます*display:inline; zoom:1;。これにより、ほとんどのシナリオでブロックが意図したとおりに動作します。

以下に、この実装の例を示します。

.stats{
    margin-left : 20px;
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius : 12px;
    font-size: 15px;
    text-align: center; 
    display:inline-block;
    *display:inline;
    zoom:1;
    vertical-align:top;
}


.dropStatus {
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius: 12px;
    display:inline-block;
    *display:inline;
    zoom:1;
    vertical-align:top;
}

score 1 · Accepted Answer

これを行う最も確実な方法は、またはに設定displayすることです。必要に応じて使用してください。inlineinline-blockvertical-align

score 0 · Accepted Answer

0

お役に立てれば：）

http://jsfiddle.net/uLPT5/

于 2012-08-06T13:43:03.527 に答える

html - CSS 要素の配置

4 に答える 4

Related

Reference