it-roy-ru.com

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

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

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

Я открыт для техник HTML5/CSS3.

60
Fixer
<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 посмотрите на это учебник

89
Dennis Traub

Ну, вы можете сделать таблицы 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>
40
RobKohr

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

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

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, которое позволяет вам размещать содержимое в столбцах без всего этого, играя с divs:

column-count: 2;
35
Fenton

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

10
twm

Ну, если вы хотите супер самый простой метод, просто поставьте 

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

.left {
    float: left;    
}

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

8
fearofawhackplanet

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

Последние версии 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>
6
Axel Beckert

Если вы хотите сделать это способом 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>
3
Shauna

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

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

взгляните на этот пример http://codepen.io/butlerps/pen/wGmXPL

2
philip

Этот код не только позволяет добавлять два столбца, но и позволяет добавлять столько столбцов, сколько вы хотите, и выравнивать их по левому или правому краю, менять цвета, добавлять ссылки и т.д. Проверьте также ссылку 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;

}
1
harishannam

несколько небольших изменений, чтобы сделать его отзывчивым

<style type="text/css">
#wrap {
    width: 100%;
    margin: 0 auto;
    display: table;
}
#left_col {
   float:left;
   width:50%;
}
#right_col {
   float:right;
   width:50%;
}
@media only screen and (max-width: 480px){
    #left_col {
       width:100%;
    }
    #right_col {
       width:100%;
    }
}
</style>

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

Вы можете создавать текстовые столбцы с CSS 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

0
TThomas
<div id"content">
<div id"contentLeft"></div>
<div id"contentRight"></div>
</div> 

#content {
clear: both;
width: 950px;
padding-bottom: 10px;
background:#fff;
overflow:hidden;
}
#contentLeft {
float: left;
display:inline;
width: 630px;
margin: 10px;
background:#fff;
}
#contentRight {
float: right;
width: 270px;
margin-top:25px;
margin-right:15px;
background:#d7e5f7;
} 

Очевидно, вам нужно будет отрегулировать размер столбцов в соответствии с вашим сайтом, а также цветами и т.д., Но это должно сделать это. Вам также необходимо убедиться, что ширина вашего ContentLeft и ContentRight не превышает ширину содержимого (включая поля).

0
Magnum26