Лучший способ сделать столбцы в HTML/CSS

Я ищу способ отображения 3 столбцов контента. Я нашел способ отображения столбцов обхода, но я не хочу этого для этой страницы. Я ищу способ сказатьЛучший способ сделать столбцы в HTML/CSS

<column> 
<!-- content --> 
</column>

3 раза, а также 3 столбца, отображаемые друг рядом с другом. Лучший пример, который я использовал, - The Verge (http://www.theverge.com/). Каков наилучший способ сделать это?

источник

2012-04-01 muttley91

Использование поплавка в таблице стилей? – hjpotter92

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

@ TheJumpingFrog Я использовал float, но я нахожу противоречивое поведение с этим в зависимости от размера экрана. Есть ли способ сказать «всегда показывать в этом одном формате» с использованием метода float? – muttley91

Я предлагаю вам либо использовать <table>, либо CSS.

Предпочтительный CSS является более гибким. Примером может быть:

<!-- of course, you should move the inline CSS style to your stylesheet --> 
<!-- main container, width = 70% of page, centered --> 
<div id="contentBox" style="margin:0px auto; width:70%"> 

<!-- columns divs, float left, no margin so there is no space between column, width=1/3 --> 
    <div id="column1" style="float:left; margin:0; width:33%;"> 
    CONTENT 
    </div> 

    <div id="column2" style="float:left; margin:0;width:33%;"> 
    CONTENT 
    </div> 

    <div id="column3" style="float:left; margin:0;width:33%"> 
    CONTENT 
    </div> 
</div>

jsFiddle: http://jsfiddle.net/ndhqM/

Использование поплавок: осталось бы 3 колонки прилипают друг к другу, входя в слева внутри центрированного сНу «содержимого коробки».

источник

2012-04-01 18:33:31 AbSoLution8

Я думаю, что вы хотите, чтобы 'width' внутри атрибута style:' style = "margin : 0 auto; ширина: 70%; ". Кроме того, я не знаю о каких-либо браузерах, которые применяют маржу к 'div' в своей таблице стилей по умолчанию, поэтому« margin: 0; »на плавающих divs представляется излишним. – steveax

спасибо, что напомнил мне о ширине. Исправлена. – AbSoLution8

Я хочу добавить, что я нашел ответ Майки для моих личных проблем с форматированием. Будущие читатели, см. Ответ Майки, а также этот. – muttley91

В дополнение к 3 плавающей структуре столбцов (которые я бы предложил также), вы должны вставить clearfix, чтобы предотвратить layoutproblems с элементами после columncontainer (держите столбец контейнера в потоке, так сказать ...) ,

<div id="contentBox" class="clearfix"> 
.... 
</div>

CSS:

.clearfix { zoom: 1; } 
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 
.clearfix:after { clear: both; }

источник

2012-04-01 18:40:05

Спасибо, это зафиксировало проблему форматирования, которую я имел. – muttley91

Добро пожаловать. Имейте в виду, что это обычный способ исправления проблем макета с плавающими элементами (например, меню «ul') –

. Я обязательно сделаю это, так как это не первый случай, когда я столкнулся с проблемами. Благодаря! – muttley91

Вы, вероятно, следует рассмотреть возможность использования CSS3 для этого, хотя он включает использование префиксы.

Я вывел быстрый fiddle на демоверсию, но суть в этом.

<style> 
.3col 
{ 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    column-count:3; 
    column-gap:10px; 
} 
</style> 
<div class="3col"> 
<p>col1</p> 
<p>col2</p> 
<p>col3</p> 
</div>

источник

2013-05-31 08:34:06 Stimul8d

Возможно, вам будет полезно знать поддержку браузера по этому вопросу в [w3schools] (http://www.w3schools.com/css3/css3_multiple_columns.asp); IE10 +. Мне нужно подождать улучшения поддержки браузера – Duncanmoo

@ Ссылка Duncanmoo сломана, попробуйте следующее: http://caniuse.com/multicolumn - в настоящее время только около 14% поддержки браузером по использованию (76% с префиксами). – naught101

Жаль, что я мог бы отредактировать старый комментарий, ну вот поддержка браузера на этом сайте [w3schools] (http://www.w3schools.com/css/css3_multiple_columns.asp). – Duncanmoo

Bootstrap. Посмотрите на их удивительную сетку here.

Использование Bootstrap, вы могли бы сделать три колонки, как это:

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    </div> 
</div>

источник

2014-04-30 23:17:06 bhekman

Хорошая точка. Я добавил базовый пример. – bhekman

Вы также можете попробовать.

.col{ 
 
    float: left; 
 
} 
 
.col + .col{ 
 
    float: left; 
 
    margin-left: 20px; 
 
} 
 

 
/* or */ 
 

 
.col:not(:nth-child(1)){ 
 
    float:left; 
 
    margin-left: 20px; 
 
}

<div class="row"> 
 
    <div class="col">column</div> 
 
    <div class="col">column</div> 
 
    <div class="col">column</div> 
 
</div>

исх: http://codepen.io/co0kie/pen/gPKNWX?editors=1100

источник

2016-02-01 09:46:49 co0kie

Лучший способ сделать столбцы в HTML/CSS

ответ

Смежные вопросы