Блоки, перекрывающиеся в css

Question

У меня есть 2 блока внутри блока, которые должны отображаться - встроенные, но это не работает, когда я даю display-inline.

Fiddle: http://jsfiddle.net/8T5RZ/

мне нужны 2 блоки, которые будут отображаться бок о бок, а не перекрывающихся

HTML:

<div class="outer-container"> 
    <div class="inner-container"> 
     <div class="innermost-container" /> 
     <div class="innermost-container" /> 

    </div> 
</div> 

CSS

.innermost-container{ 
    background-color:green; 
    width:100px; 
    height:100px; 
    border-style:solid; 
    border-width:5px; 
} 

Answer 1

Изменить

<div class="innermost-container" /> 

до

<div class="innermost-container"></div> 

<div /> недопустим разметка HTML.

Запись:

.innermost-container{display:inline-block;} 

Примечание:

inline-block абитуриенты белого пространства между элементами. Напишите элементы на одной строке, чтобы избежать пробелов.

пишут:

<div class="innermost-container"></div><div class="innermost-container"></div> 

вместо

<div class="innermost-container"></div> 
<div class="innermost-container"></div> 

DEMO here.

Answer 2

Вы не можете самостоятельно близко a div элемент. Несмотря на то, что они пусты, вам необходимо явно указать тег </div>. Так закройте их и не использовать для display: inline-block;.innermost-container

.innermost-container{ 
    background-color:green; 
    width:100px; 
    height:100px; 
    border-style:solid; 
    border-width:5px; 
    display: inline-block; /* Can also use float */ 
} 

Demo

---

В дальнейшем вы можете использовать this инструмент для проверки разметки.

Answer 3

1) Вы не можете самостоятельно близко DIV теги (<div />) и 2) установить дисплей свойства ваших дивы встраивать-блок:

display:inline-block; 

jsFiddle example

Answer 4

Display:inline не будет заботиться о размерах, так что было бы обернуть на содержание: http://jsfiddle.net/8T5RZ/7/