html - divボックスは1行です

Question

皆さん。私は再び小さな問題を抱えています。

サインラインにいくつかのdivを含むボックスを作成しようとしています。

問題は、新しい div を開始すると、彼の隣ではなく、彼の前にあるものの上部にあることです。

float left または border-sizing と display table cell で試しました。それはすべてうまくいきませんでした。http://www.awesom-media.de/umgebung/index.html

緑の背景のものです。

この部分には 4 つのアイコン div が必要です。2つはすでにそこにあります。赤いボックスには、訪問者が各アイコンをクリックすると表示されるコンテンツが表示されます。

しかし、問題は、2 つのアイコン (マジックスティックとスター) を 1 行で取得できないと言ったようなものです。

score 2 · Accepted Answer

使用するdisplay: inline-block

div {
    width: 50px;
    height: 50px;
    background: #ccc;
    display: inline-block;
}

score 0 · Accepted Answer

これを試してくださいfloat: left;。各アイコンに追加height: 100%;して、.webicons次のように追加しました：

お役に立てれば！

score 0 · Accepted Answer

css プロパティを各 div (マジックとワンド) に float:left; に追加する必要があります。および webicons div を clear:left; にします。

#magic { float:left; }
#wand { float:left; }
#webicons  { clear: left; height:110px; }

3 に答える 3