0

を使用して並んでいる 3 つの div がありdisplay:inline-blockます。

div が空の場合、それらは同じ水平レベルにあります。

<p>タグといくつかの改行 ( ) を左端/最初の divに追加するとすぐに<br/>、残りは下に移動します。

2 番目のボックスに十分なコンテンツを入れると、3 番目のボックスはさらに下に移動します。

ボックスの私のHTML：

<div class="main-box" id="about">
    <h1>About</h1>
    <p>This box has one paragraph of text, with line breaks</p>
</div>

<div id="login-container">
    <div class="main-box" id="login">
        <h1>Login</h1>
        <p>Already a member? Sign in and see your stuff!</p>
    </div>
    <div class="main-box" id="signup">
        <h1>Signup</h1>
        <p>Create an account by filling out this form.</p>
    </div>
</div>

最後の 2 つのボックスは div にグループ化され、一緒に「浮動」します。

私のCSS：

div.main-box {
    text-align: left;
    display: inline-block;
    border: 10px solid red;
    margin: 20px;
    padding: 25px;
    border-radius: 50px;
    width: 400px;
    height: 400px;
}
div#login-container {
    display: inline-block;
}
4

2 に答える 2

1

追加するだけです：

 vertical-align: top;

ここinline-blockで、HTMLコードのIE7の修正や間隔などの詳細を読むことができます。

于 2013-01-27T19:31:22.093 に答える
0

内部の div に display: inline-block の代わりに float: left を使用しますか?

私が考えることができる別の解決策は、float: left または display: table を使用してクラスを作成し、それを段落タグに適用することです。

于 2013-01-27T19:37:58.317 に答える