Как создать несколько столбцов в div

Мне было интересно, как я мог бы создать несколько столбцов в div. Это для нижнего колонтитула, и я хочу карту сайта, ссылки на социальные сети и т. Д.

Я собирался использовать<multicol> но потом я прочитал, что это устарело, и это меня оттолкнуло.

По сути, у меня DIV шириной 80%, и мне нужны три колонки. Желательно каждый с запасом.

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 сейчас. Спасибо за ваше время.

 David Thomas20 мая 2012 г., 22:21
Какой HTML вы пытаетесь стилизовать? Мы, несмотря на видимость наоборот, не склонны к психическим или способным. Дайте нам представление о том, как это должно выглядеть, когда-то в стиле.
 Josh Dempsey20 мая 2012 г., 22:32
Мне просто нужно установить столбцы, чтобы я мог вводить текст в три столбца.
 Josh Dempsey20 мая 2012 г., 23:21
Привет, Дэвид. Я хочу тогда быть независимым. Но эта проблема уже решена, поэтому, пожалуйста, уделите время тому, чтобы помочь кому-то еще.
 David Thomas20 мая 2012 г., 22:34
Итак, я понял, но мы все еще гадаем, хотите ли вы, чтобы столбцы перемещались, от одного к следующему, или вы хотите, чтобы независимые списки в каждом столбце. Пожалуйста помогиus помогатьyou.

Ответы на вопрос(1)

Решение Вопроса

float: left; (или правильно) и дать им точную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>

Видеть этоВ бою.

 28 авг. 2015 г., 20:26
Это не работает, если столбец div имеет границы. Он будет перенесен на следующий ряд, если он недостаточно широк. Как обрабатываются границы при определении размера каждого столбца?
 28 авг. 2015 г., 23:34
Брэд, это из-за стандартной блочной модели CSS, которая включает отступы и границу в размере. Вы можете настроить это поведение, используяbox-sizing имущество.
 07 нояб. 2018 г., 17:44
В таких ситуациях, как у меня, когда столбцы попадают на последующее содержимое страницы, может быть полезно добавить пустой<div style="clear: both;"></div>

Ваш ответ на вопрос