2

ウェブサイトを作ろうとしていますが、レイアウトに問題があります。
同じ列に並びたいdiv:logoのですdiv:social mediaが、できませんでした。

デモ

4

3 に答える 3

6

div:logo と div:social メディアをこのように (並べて) 書きます。その間にスペースを入れないでください。

<div class="child" id="logo">logo</div><div class="child" id="socialMedia">sosyal media</div>

これで問題が解決することを願っています。

于 2013-08-01T09:14:04.707 に答える
3

使用している場合display:inline-block、インライン ブロック要素間にスペースを入れることができません。それ以外の場合は、これを空白として扱い、挿入します。

これを削除すると動作します：

div 間の空白を削除

コメントで保持されたコードのインデント

于 2013-08-01T09:14:24.510 に答える
3

これを試して：

HTML:

        <div class="parent">
            <div class="parent" id="header">
                <div class="child floatL" id="logo" >
                    logo
                </div>
                <div class="child floatL" id="socialMedia" >
                    sosyal media
                </div>
                <div class="child" id="menuBar">
                    menu bar
                </div>
            </div>

            <div class="parent" id="body">
                body
            </div>

            <div class="parent" id="footer">
                footer
            </div>
        </div>

CSS:

body {
    text-align: center;
}

.floatL
{
    float:left;
}

.parent {
    display: inline-block;
    width: 960px;
}

.child {
    display: inline-block;
}

.parent, .child {
    border:  none;
    background-color: #CCC;
}

#logo {
    width: 640px;
    background-color: #ff6a00;
}

#socialMedia {
    width: 320px;
    background-color: #ffd800;
}

#menuBar {
    width: 100%;
    background-color: #b6ff00;
}

フィドル

于 2013-08-01T09:10:34.777 に答える