Размещение рамки под изображением и текстом в HTML, но граница была под текстом, когда изображение слишком большое - PullRequest
Новая
       3

Размещение рамки под изображением и текстом в HTML, но граница была под текстом, когда изображение слишком большое

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

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

<html>
    <head>
        <title> This is an demo </title>
        <style>
            .left { float: left; }
            .content {
                clear: both;
                border-color: #666666;
                border-bottom: 3px solid;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <img class="left" src="61add42atw1dnf1k4h4qzj.jpg" />
            <p> This is a not so long paragraph</p>
        </div>
    </body>
</html>

enter image description here

Как разместить границу чуть ниже?

Спасибо!

Ответы [ 4 ]

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

Вам нужно clear текущий float:

Либо: 

<br clear="left" />  <!-- or "right" or "all" -->

Или: 

<div style="clear: left;"></div> <!-- or "right" or "both" -->
1 голос
/ 24 ноября 2011

В .content div замените clear: оба значения переполнением: hidden 

.content {
                overflow: hidden;
                border-color: #666666;
                border-bottom: 3px solid;
            }
0 голосов
/ 24 ноября 2011

Я не совсем понимаю, чего вы хотите достичь, но если вы хотите, чтобы у вас был div с img и p ниже друг от друга, тогда вы могли бы просто избавиться от class="left" в img и применить float: left к классу content. 

<html>
    <head>
        <title> This is an demo </title>
        <style>
            .left { float: left; }
            .content {
                float: left; /* can get rid of this if you want your div to have the page witdh */
                border-color: #666666;
                border-bottom: 3px solid;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <img src="image.jpg" />
            <p> This is a not so long paragraph</p>
        </div>
    </body>
</html>
0 голосов
/ 24 ноября 2011

Используйте float:left; для всех:

  • Изображение уже вышло из класса
  • У Div .content должно быть то же самое, т.е.Оболочка div
  • абзац внутри содержимого
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...