web-dev-qa-db-ja.com

divに複数の列を作成する方法

Divに複数の列を作成する方法を知りたいと思いました。フッター用で、サイトマップ、ソーシャルメディアへのリンクなどが必要です。

<multicol>を使用するつもりでしたが、廃止されたため、使用を遅らせました。

基本的に、80%の幅のDIVがあり、3つの列が必要です。できればそれぞれにマージンを持たせてください。

Css:

 div.bottom
        {
            height: 200px;
            width: 80%;
            margin-left: auto;
            margin-right: auto;
            margin-top: none;
            margin-bottom: none;
            border-top: 4px solid #00ccff;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            background-color: #575757;
        }

今はHTMLが必要です。お時間をいただきありがとうございます。

19
Josh Dempsey

float: left;(または右)で3つのdivを作成し、正確なwidthを指定します。

<div class="bottom">
  <div style="float: left; width: 33%;"></div>
  <div style="float: left; width: 33%;"></div>
  <div style="float: left; width: 33%;"></div>
</div>

ご覧ください in action

43
Czechnology