css - divの1つが空である4つのdivを並行して整列させます

Question

HTML初心者ですので、よろしくお願いします。

最初、3 番目、4 番目の div が静的な 4 つの div を並列に配置しようとしています。2 番目の div は空で、残りの場所を占める必要があります。問題を解決するためにテーブルを使用したくありません。divを使用して解決する方法はありますか?

HTML:

   <div class="container">
        <div class="content" >
            first
        </div>
        <div class="empty">

        </div>
        <div class="content">
         third
        </div>
        <div class="content">
         fourth
        </div>

    </div>

CSS:

   .container{
        strong textwidth:1020px;
        height:40px;
    }

    .content{
        position:relative;
        background-color:#2cc2e7;
        height:40px;
        width:142px;
        float:right;
        margin-right:5px;
    }

    .empty{
        background-color:#f1d486;
        height:40px;
        width:auto;
        margin-right:5px;
    }

Answer 1

  を追加する準備ができている場合 空の div の下では、次を使用できます。

<div class="empty">
    &nbsp;
</div>

次のスタイルシートを使用:

.container {
    width:1020px;
    height:40px;
    display:table;
    width:100%;
}
.container div {
    height:40px;
    display:table-cell;
}
.content {
    background-color:#2cc2e7;
    width:142px;
    max-width:142px;
}
.empty {
    background-color:#f1d486;
}

これは、4 つの div のいずれかが「空」のクラスを持つものであり、使用可能なスペースを埋めるために自動拡張され、他の div サイズはすべて 142 ピクセルになります。