Float div left - Текст элемента Parent, который также обертывает этот div?

Question

Aloha - Я воссоздавать этот учебник - [CSS Positioning] [1] -

[1]: http://www.barelyfitz.com/screencast/html-training/css/positioning/, чтобы действительно понять учебник. На этапе 7 в учебнике я столкнулся с чем-то, что я не могу понять. На шаге 7 учебника вы увидите, что текст «id = div-1» находится над «div-1a», который перемещается слева.

Если вы посмотрите на мою ручку кода - http://codepen.io/DarrenHaynes/pen/gLoYpp/ - вы увидите, что текст «id = div-1» выравнивается справа от «div-1a». Я не ожидаю этого, так как «div-1» является родительским элементом «div-1a». Таким образом, я не могу понять, как заставить копейщик реплицировать учебник.

Мой код на codepen:

HTML:

<div id="div-before"> 
    id = div-before 
</div> 
<div id="div-1"> 
    id = div-1 
    <div id="div-1a"> 
    id = div-1a 
    <br> 
    <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. 
    </div> 
    <div id="div-1b"> 
    id = div-1b<br><br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan 
    augue ipsum id lorem. 
    </div> 
    <div id=div-1c> 
    id = div-1c 
    </div> 
</div> 
<div id="div-after"> 
    id = div-after 
</div> 

CSS:

#div-before, 
#div-after { 
    margin: 0 auto; 
    width: 400px; 
    font-size: 20px; 
    background-color: #8888DD; 
    padding: 2px 5px; 
} 

#div-1 { 
    position: relative; 
    margin: 0 auto; 
    width: 400px; 
    color: white; 
    padding: 20px 10px 10px 10px; 
    background-color: black; 
} 

#div-1a { 
    float: left; 
    width: 200px; 
    padding: 3px; 
    background-color: red; 
} 

#div-1b { 
    padding: 3px; 
    background-color: green; 
} 

#div-1c { 
    padding: 3px; 
    background-color: #33D; 
} 

Answer 1

Вы можете обернуть заголовок для "Div-1" вокруг 'р' тег:

<div id="div-before"> 
    id = div-before 
</div> 
<div id="div-1"> 
    <p>id = div-1</p> 
    <div id="div-1a"> 
    id = div-1a 
    <br> 
    <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. 
    </div> 
    <div id="div-1b"> 
    id = div-1b<br><br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan 
    augue ipsum id lorem. 
    </div> 
    <div id=div-1c> 
    id = div-1c 
    </div> 
</div> 
<div id="div-after"> 
    id = div-after 
</div> 

CSS:

#div-before, 
#div-after { 
    margin: 0 auto; 
    width: 400px; 
    font-size: 20px; 
    background-color: #8888DD; 
    padding: 2px 5px; 
} 

#div-1 { 
    position: relative; 
    margin: 0 auto; 
    width: 400px; 
    color: white; 
    padding: 20px 10px 10px 10px; 
    background-color: black; 
} 

#div-1a { 
    float: left; 
    width: 200px; 
    padding: 3px; 
    background-color: red; 
} 

#div-1b { 
    padding: 3px; 
    background-color: green; 
} 

#div-1c { 
    padding: 3px; 
    background-color: #33D; 
} 

Вот Codepen: http://codepen.io/anon/pen/xRJNdZ