要素横並び-2

要素を横並びにする方法はいくつかありますが、ここではdisplay: tableを使う方法について見てみましょう。
各要素にdisplayプロパティ、値table-cellを設定、親要素にdisplayプロパティ、値tableを設定することにより、簡単に横並びを作ることができます。

その特徴は、要素幅が自動分配されるため、カラム落ちがありません。

自動分配

下の図は要素幅を指定していませんが、コンテンツ量によって自動的に要素幅が分配されます。

ホーム

ホームページを自作するサイト

自作

ホームページを自作する

htmlソース

<!--====参考===-->
<body>
    <div class="sample-1">
        <div class="sample-a">
            <p>ホーム</p>
        </div>
        <div class="sample-b">
            <p>ホームページを自作するサイト</p>
        </div>
        <div class="sample-c">
            <p>自作</p>
        </div>
        <div class="sample-d">
            <p>ホームページを自作する</p>
        </div>
    </div>
</body>

cssソース

/*===参考===*/
.sample-1 {
    display: table;
    width: 100%;
    height: 100px;
    background: yellow;
    border: solid 1px red;
    box-sizing: border-box;
}
.sample-a,.sample-b,.sample-c {
    display: table-cell;
    border-right: solid 1px red;
    box-sizing: border-box;
}

.sample-d {
    display: table-cell;
}

.sample-a {
    background: yellow;
}

.sample-b {
    background: yellowgreen;
}

.sample-c {
    background: pink;
}

sample-d {
    background: magenta;
}

.sample-a,.sample-b,.sample-c,.sample-d p {
    text-align: center;
}

分配幅を指定する。

今回は要素が4個ですから、4等分で幅を指定してみます。
値table-cellを設定した要素にwidth: 25%;を追記しました。

ホーム

ホームページを自作するサイト

自作

ホームページを自作する