Простой HTML-макет с двумя столбцами без использования таблиц - PullRequest
Новая
       1

Простой HTML-макет с двумя столбцами без использования таблиц

61 голосов
/ 17 июня 2011

Я ищу супер простой способ создания двухколоночного формата для отображения некоторых данных на веб-странице.Как я могу достичь того же формата, что и: 

<table>
    <tr>
        <td>AAA</td>
        <td>BBB</td>
    </tr>
</table>

Я также открыт для методов HTML5 / CSS3.

Ответы [ 12 ]

91 голосов
/ 17 июня 2011 
<style type="text/css">
#wrap {
   width:600px;
   margin:0 auto;
}
#left_col {
   float:left;
   width:300px;
}
#right_col {
   float:right;
   width:300px;
}
</style>

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
</div>

Убедитесь, что сумма ширин столбцов равна ширине обтекания.В качестве альтернативы вы также можете использовать процентные значения для ширины.

Для получения дополнительной информации об основных методах верстки с использованием CSS, посмотрите этот учебник

40 голосов
/ 07 февраля 2013

Ну, вы можете создавать таблицы CSS вместо таблиц HTML. Это сохраняет ваш HTML семантически правильным, но позволяет вам использовать таблицы для макета.

Кажется, это имеет больше смысла, чем использование поплавков. 

<html>
  <head>
    <style>

#content-wrapper{
  display:table;
}

#content{
  display:table-row;
}

#content>div{
  display:table-cell
}

/*adding some extras for demo purposes*/
#content-wrapper{
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  position:absolute;
}
#nav{
  width:100px;
  background:yellow;
}
#body{
  background:blue;
}
</style>

  </head>
  <body>
    <div id="content-wrapper">
      <div id="content">
        <div id="nav">
          Left hand content
        </div>
        <div id="body">
          Right hand content
        </div>
      </div>
    </div>
  </body>
</html>
35 голосов
/ 17 июня 2011

Я знаю, что на этот вопрос уже был дан ответ, но, разобравшись с версткой, я хотел добавить альтернативный ответ, который решает несколько традиционных проблем с плавающими элементами ...

Вы можете увидеть обновленный пример в действии здесь.

http://jsfiddle.net/Sohnee/EMaDB/1/

Не имеет значения, используете ли вы HTML 4.01 или HTML5 с семантическими элементами (вам нужно будет объявить левый и правый контейнеры как display: block, если их еще нет).

CSS 

.left {
    background-color: Red;
    float: left;
    width: 50%;
}

.right {
    background-color: Aqua;
    margin-left: 50%;
}

HTML 

<div class="left">
    <p>I have updated this example to show a great way of getting a two column layout.</p>
</div>
<div class="right">
    <ul>
        <li>The columns are in the right order semantically</li>
        <li>You don't have to float both columns</li>
        <li>You don't get any odd wrapping behaviour</li>
        <li>The columns are fluid to the available page...</li>
        <li>They don't have to be fluid to the available page - but any container!</li>
    </ul>
</div>

Существует также довольно аккуратное (хотя и более новое) дополнение к CSS, которое позволяет вам размещать содержимое в столбцах без всего этого, играя в div: 

column-count: 2;
10 голосов
/ 16 мая 2016

Теперь существует гораздо более простое решение, чем когда этот вопрос был задан пять лет назад. CSS Flexbox делает макет из двух колонок изначально простым. Это эквивалент таблицы в оригинальном вопросе: 

<div style="display: flex">
    <div>AAA</div>
    <div>BBB</div>
</div>

Одной из приятных особенностей Flexbox является то, что он позволяет вам легко указать, как дочерние элементы должны уменьшаться и увеличиваться в зависимости от размера контейнера. Я расширю приведенный выше пример, чтобы сделать прямоугольник на всю ширину страницы, сделать левый столбец шириной не менее 75 пикселей и увеличить правый столбец, чтобы захватить оставшееся пространство. Я также перенесу стиль в отдельный блок, назначу некоторые цвета фона, чтобы столбцы были видны, и добавлю устаревшую поддержку Flex для некоторых старых браузеров. 

<style type="text/css">
.flexbox {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    width: 100%;
}

.left {
    background: #a0ffa0;
    min-width: 75px;
    flex-grow: 0;
}

.right {
    background: #a0a0ff;
    flex-grow: 1;
}
</style>

...

<div class="flexbox">
    <div class="left">AAA</div>
    <div class="right">BBB</div>
</div>

Flex является относительно новым, и поэтому, если вы застряли с необходимостью поддержки IE 8 и IE 9, вы не сможете его использовать. Однако на момент написания статьи http://caniuse.com/#feat=flexbox указывает, по крайней мере, частичную поддержку браузерами, которые используют 94,04% рынка.

8 голосов
/ 17 июня 2011

Что ж, если вам нужен супер простой метод , просто укажите 

<div class="left">left</div>
<div class="right">right</div>

.left {
    float: left;    
}

, хотя вам может потребоваться больше, чем это, в зависимости от других требований макета.

6 голосов
/ 13 декабря 2014

Все предыдущие ответы предоставляют только жестко запрограммированное место, где заканчивается первый столбец и начинается второй столбец. Я бы ожидал, что это не требуется или даже не требуется.

Последние версии CSS знают об атрибуте под названием columns, который делает макеты на основе столбцов очень простыми. Для более старых браузеров вам необходимо включить -moz-columns и -webkit-columns.

Вот очень простой пример, который создает до трех столбцов, если каждый из них имеет ширину не менее 200 пикселей, в противном случае используется меньше столбцов: 

<html>
  <head>
    <title>CSS based columns</title>
  </head>
  <body>
    <h1>CSS based columns</h1>
    <ul style="columns: 3 200px; -moz-columns: 3 200px; -webkit-columns: 3 200px;">
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three</li>
      <li>Item four</li>
      <li>Item five</li>
      <li>Item six</li>
      <li>Item eight</li>
      <li>Item nine</li>
      <li>Item ten</li>
      <li>Item eleven</li>
      <li>Item twelve</li>
      <li>Item thirteen</li>
    </ul>
  </body>
</html>
3 голосов
/ 17 июня 2011

Если вы хотите сделать это способом HTML5 (этот конкретный код работает лучше для таких вещей, как блоги, где <article> используется несколько раз, один раз для каждого тизера записи в блоге; в конечном счете, сами элементы не имеют большого значения, это стиль и расположение элементов, которые принесут вам желаемые результаты): 

<style type="text/css">
article {
  float: left;
  width: 500px;
}

aside {
  float: right;
  width: 200px;
}

#wrap {
  width: 700px;
  margin: 0 auto;
}
</style>

<div id="wrap">
  <article>
     Main content here
  </article>
  <aside>
     Sidebar stuff here
  </aside>
</div>
2 голосов
/ 14 апреля 2016

Я знаю, что это старый пост, но подумал, что я добавлю свои два пеннета.Как насчет редко используемого и часто забываемого списка описаний?С простым битом css вы можете получить действительно чистую разметку. 

<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>

посмотрите на этот пример http://codepen.io/butlerps/pen/wGmXPL

1 голос
/ 04 сентября 2018

Вы можете создавать текстовые столбцы с помощью свойства Multiple Columns .Вам не нужно ни таблицы, ни нескольких делений.

HTML 

<div class="column">
       <!-- paragraph text comes here -->
</div>

CSS 

.column {
    column-count: 2;
    column-gap: 40px;
}

Подробнее о CSS Multiple Columns см. На https://www.w3schools.com/css/css3_multiple_columns.asp

1 голос
/ 05 апреля 2013

Этот код позволяет не только добавлять два столбца, но и добавлять столько столбцов, сколько вы хотите, и выравнивать их по левому или правому краю, менять цвета, добавлять ссылки и т. Д. Проверьте также ссылку Fiddle

Fiddle Link: http://jsfiddle.net/eguFN/

<div class="menu">
                <ul class="menuUl">
                    <li class="menuli"><a href="#">Cadastro</a></li>
                    <li class="menuli"><a href="#">Funcionamento</a></li>
                    <li class="menuli"><a href="#">Regulamento</a></li>
                    <li class="menuli"><a href="#">Contato</a></li>
                </ul>
</div>

Css выглядит следующим образом 

.menu {
font-family:arial;
color:#000000;
font-size:12px;
text-align: left;
margin-top:35px;
}

.menu a{
color:#000000
}

.menuUl {
  list-style: none outside none;
  height: 34px;
}

.menuUl > li {
  display:inline-block;
  line-height: 33px;
  margin-right: 45px;

}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...