CSS изображение и абзац выровнены с плавающей точкой, некрасивый макет при добавлении нескольких записей - PullRequest
Новая
       22

CSS изображение и абзац выровнены с плавающей точкой, некрасивый макет при добавлении нескольких записей

1 голос
/ 24 ноября 2011

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

Поэтому я выложил минимальный тестовый пример: 

<html>
    <head>
        <title> This is an demo </title>
        <style>
            img { float: left; }
        </style>
    </head>
    <body>
        <div id="content">
            <img src="61add42atw1dnf1k4h4qzj.jpg" />
            <p> This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph ..  This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph ..  This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph .. 
            </p>
        </div>
        <div id="content">
            <img src="61add42atw1dnf1k4h4qzj.jpg" />
            <p> This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph ..  This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph ..  This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph .. 
            </p>
        </div>
    </body>
</html>

И результат (Chromium Browser 15) был совершенно плохим:

enter image description here

Второй div перекрывал первый.

PS: я пытался использовать таблицу HTML, но это не то, что я хотел, лучше исправить мою ошибку здесь

Спасибо!

Ответы [ 2 ]

3 голосов
/ 24 ноября 2011

Вы можете добавить очистку: оба к содержимому div, чтобы они не перекрывали друг друга. 

#content {
clear:both;
}

Кроме того, если вы используете #content несколько раз, вы должны использоватьclass вместо id.По классам и идентификаторам: http://www.tizag.com/cssT/cssid.php

0 голосов
/ 24 ноября 2011

поместите div между содержимым div <div style="clear:both;"></div> like 

<div id="content"></div>
<div style="clear:both;"></div>
<div id="content"></div>
...