3

ここでdivの動作を説明できる人はいますかhttp://jsfiddle.net/Z7z5Q/ ? なぜそれらが一列に並んでいないのだろうか？そして、テキストを div に追加すると、他の div が移動するのはなぜですか?

ここにhtmlとcssがあります：

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>My Social Network</title>
    </head>
    <body>
        <!--Add your HTML below!-->
        <div class="friend">Some text in more than two line, actually in 3</div>
        <div class="family">Some text in two line</div>
        <div class="friend" id="best_friend"></div>
        <div class="enemy" id="archnemesis"></div>
        <div class="friend">Some text</div>
        <div class="family"></div>
        <div class="friend"></div>
        <div class="family"></div>

    </body>
</html>

CSS:

div {
    display: inline-block;
    margin-left: 5px;
    height:100px;
    width:100px;
    border-radius: 100%;
    border: 2px solid black;
}

.friend {
   border: 2px dashed #008000;  
}

.family {
    border: 2px dashed #0000FF;
}

.enemy {
    border: 2px dashed #FF0000;
}

#best_friend {
    border:4px solid #00C957;
}
#archnemesis {
    border: 4px solid #CC0000;
}

ありがとう。ドキュメントや記事へのリンクを歓迎します。

4

4 に答える 4

4

要素は整列されています...しかし、明らかに意図した方法ではありません;)

問題の鍵はプロパティvertical-alignです。ボックスがよく見えるように、
まず取り外します。 次に追加：問題が解決しました（フィドルを参照）border-radius
vertical-align: middle;

コンテンツであろうとなかろうと、各ボックスは固定された高さ (100px に固定しました) に対して相対的に配置されます。

なしでそもそも何が起こったのvertical-align: middle;ですか？の値を変更しますbaseline。元の問題に戻ります。これはデフォルト値であり、spanたとえば s にテキストを表示するとき、またはラベルとテキスト フィールドのテキストを表示するときに必要な値であり、両方のパディングとマージンに関係ありません。しかし、テキストが 2 行または 3 行を占めるように強制されている場合 (ボックスの幅は、内容に関係なく 100 ピクセルです)、ベースラインは予想とは大きく異なります。これは、コンテンツのベースライン、つまりテキストの最後の行です。
empty と同じdiv: 一致するコンテンツがないため、ベースラインは下側です (これについてはよくわかりませんが、それが起こっているようです)。
空白に単一の文字または改行不可能なスペースを追加しますdiv: ベースラインは空の div とは完全に異なります。他のフィドルを見る

テキストの段落で失われた背の高い画像でも同じ現象が発生します。並べることはできますvertical-alignが、違いは、何が起こっているのかを簡単に確認できることです。ここでは、「通常の」テキストが 1 つも出現しないため、それを見つけるのは少し難しくなります。

浮く理由: 左; ここで機能しますか？すべて同じ高さの各ボックスを取得し、その内容ではなく、ボックスに対して相対的に配置します。しかし、その後、クリアを管理する必要があり、ボックスに 1px 以上あると、次のすべてのボックスの配置が崩れる可能性があります...

于 2013-02-19T19:24:30.943 に答える
2

inline-block多くの好奇心を持った属性です。この例ではheight: 100px、CSS ルールから削除するdivと要素のテキストが整列されることがはっきりとわかりますが、これは、派手な円の形をした多色の破線の境界線ではそれほど明白ではありません。したがって、これを修正するには、適用しますvertical-align: top。（ソース）

「インライン ブロック」のベースラインは、通常のフローの最後のライン ボックスのベースラインです。この場合、ベースラインはマージンの下端です。

（別のスレッドからの素晴らしい回答から）

対照的に、フロートはデフォルトで上部に配置されます。

于 2013-02-19T19:19:56.907 に答える
1

align on one line 

div {vertical-align: middle;}
于 2013-02-19T19:10:27.273 に答える
1

a を追加するfloat:left;と、この問題が解決されます。こちらを参照してください: http://jsfiddle.net/Z7z5Q/5/

また、追加vertical-align:top;すると解決します：http://jsfiddle.net/Z7z5Q/7/

これは、インライン ブロックが html の空白で奇妙な動作をするためです。

于 2013-02-19T19:40:21.380 に答える