Вопрос по css, text, html – Как создать несколько столбцов в div

19

Мне было интересно, как я мог бы создать несколько столбцов в 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 сейчас. Спасибо за ваше время.

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

Ваш Ответ

1   ответ
42

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>

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

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

Похожие вопросы