Простое расположение двух столбцов html без использования таблиц
Я ищу супер простой метод для создания формата двух столбцов для отображения некоторых данных на веб-странице. Как я могу достичь того же формата, что и:
<table>
<tr>
<td>AAA</td>
<td>BBB</td>
</tr>
</table>
Я также открыт для HTML5/CSS3.
Ответы
Ответ 1
<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 см. этот учебник
Ответ 2
Ну, вы можете делать 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>
Ответ 3
Я знаю, что на этот вопрос уже был дан ответ, но, рассмотрев макет, я хотел добавить альтернативный ответ, который решает несколько традиционных проблем с плавающими элементами...
Здесь вы можете увидеть обновленный пример.
http://jsfiddle.net/Sohnee/EMaDB/1/
Не имеет значения, используете ли вы HTML 4.01 или HTML5 семантические элементы (вам нужно объявить левый и правый контейнеры в качестве отображения: 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;
Ответ 4
Ну, если вы хотите самый простой способ, просто поставьте
<div class="left">left</div>
<div class="right">right</div>
.left {
float: left;
}
хотя вам может потребоваться больше, чем в зависимости от того, какие у вас есть другие требования к макету.
Ответ 5
Все предыдущие ответы содержат только жестко закодированное местоположение, где заканчивается первый столбец, и начинается второй столбец. Я бы ожидал, что это не требуется или даже не нужно.
Недавние версии 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
Там теперь гораздо более простое решение, чем когда этот вопрос изначально был задан, пять лет назад. 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% рынка.
Ответ 7
Если вы хотите сделать это способом 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>
Ответ 8
Я знаю, что это старый пост, но подумал, что я добавлю свои два пенна. Как насчет редко используемого и забытого описания? С помощью простого фрагмента css вы можете получить действительно чистую разметку.
<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>
взгляните на этот пример http://codepen.io/butlerps/pen/wGmXPL
Ответ 9
Этот код позволяет не только добавить два столбца, но и добавить столько столбцов, сколько хотите, и выровнять их влево или вправо, изменить цвета, добавить ссылки и т.д. Также проверьте ссылку Fiddle
Ссылка на Fiddle: 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;
}
Ответ 10
<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 не превышает ширину содержимого (включая поля).
Ответ 11
несколько небольших изменений, чтобы сделать его отзывчивым
<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>
