Две колонны внутри контейнера

То, что я хочу сделать, это есть <div> с container классом и фиксированной шириной, держа <div> с block класса для предотвращения другого контента посягает на неровных пустое пространство, то две колонки (<div> «ы) бок о бок внутри block и быть 50% от ширины block.Две колонны внутри контейнера

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

У меня есть пример here того, что я до сих пор, а вот если код:

<html> 
<head> 
<title>Columns</title> 
<style> 
    div { 
     margin: 0; 
     padding: 0; 
} 
    .container { 
     background: #DDD; 
     width: 1200px; 
     margin: 0 auto; 
     padding: 2% 0; 
} 
    .block { 
     background: #555; 
     width: 100%; 
     display: block; 
} 
    .col { 
     width: 49%; 
     display: inline-block; 
     background: #333; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="block"> 

    <div class="col left"> 
     <h1>Left</h1> 
    </div> 

    <div class="col right"> 
     <h1>Right</h1> 
    </div> 

</div> 
</div> 
</body> 
</html>

источник

2013-03-06 Fifer Sheep

Попробуйте заменить эти классы:

.block { 
    background: none repeat scroll 0 0 #555555; 
    display: block; 
    overflow: auto; 
    width: 100%; 
} 

.col { 
    width: 49%; 
    float: left; 
    background: #333; 
}

источник

2013-03-06 23:42:24

Beautiful! Работает как шарм: D –

Ваша проблема будучи причины по inline-block, используя это делает отступ между ними.

Попробуйте использовать float:left, чтобы обойти эту проблему:

See on jsFiddle

.col { 
    width: 50%; 
    float: left; 
    box-sizing: border-box; 
    background: #333; 
}

Обратите внимание, что я добавил, box-sizing:border-box; это означает, что при использовании padding он будет включен в width, а не на нем. Эффективно позволяет использовать его без дополнительного внутреннего div.

Не забудьте включить четкое исправление впоследствии, чтобы «очистить» поплавки.

CSS

.clear { 
    clear:both; 
}

HTML

<div class="block"> 
    <div class="col left"> 
     <h1>Left</h1> 

    </div> 
    <div class="col right"> 
     <h1>Right</h1> 

    </div> 
    <div class="clear"></div> 
</div>

источник

2013-03-06 23:38:36

Это устраняет разрыв между ними, но я забыл упомянуть, что мне нужно «блок» растягивается в высоту ong с колонками. Когда я пытаюсь их плавать, «блок» сжимается :( –

вам нужно очистить поплавок. Простое решение состоит в том, чтобы добавить '
JoeyP

'box-sizing: border-box' - полезный совет, спасибо! Должен спасти меня много математики^_^ –

Две колонны внутри контейнера

ответ

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