Как сделать плавающее изображение слева от содержимого тела? - PullRequest
Новая
       2

Как сделать плавающее изображение слева от содержимого тела?

0 голосов
/ 12 января 2020

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

<html>
<img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg" alt="Smiley face" style="float:left;width:42px;height:42px;">

<style>
    body {
        width: 15em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>

<body>
“People say nothing is impossible, but I do nothing every day."
<p>– A. A. Milne</p>
</body>


</html>

Вы можете увидеть страница отсюда: страница

чтобы вы могли видеть, что изображение заняло место содержимого тела, когда вы удалите изображение blo c и запустите его снова, вы заметите, что содержимое тела вернулось на свое место. enter image description here enter image description here

Я хочу это так:

enter image description here

Так как я могу поместить плавающее изображение слева от содержимого тела, не занимая место содержимого тела?

Ответы [ 2 ]

1 голос
/ 12 января 2020

Вам нужно выделить изображение отдельно от текста.

Я использовал пример из таблицы стилей bootstrap. css, чтобы дать решение в качестве адаптивной страницы. Я также вынул 'float' из стиля изображения, вам это не нужно. Вместо этого выделите отступ для абзаца.

Лучше разделить страницу. html и таблицу стилей, а затем связать стиль со своей страницей html. 

<!DOCTYPE html>
<html>

<style>
    body {
        width: 15em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
       }

    .col-med-2 {
    width: 16.6666%;
    float: left;
    }

    .col-med-10 {
    width: 83.3333%;
    float: left;
    }

    img {
  border-style: none;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
	}


</style>

<body>
<div class="col-med-2">
<img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg" alt="Smiley face" style="width:42px;height:auto;">
</div>

<div class="col-med-10">
<p>“People say nothing is impossible, but I do nothing every day."</p>
<p>– A. A. Milne</p>
</div>


</body>
</html>
1 голос
/ 12 января 2020

Если я правильно понимаю ваш вопрос, хотя изображение расположено слева, вы хотите, чтобы тело текста оставалось встроенным.

Как то так? https://www.w3schools.com/code/tryit.asp?filename=GAUA12AA769P

<style>
    .post-container {
        margin: 20px 20px 0 0;
        overflow: auto;
    }

    .post-thumb {
        float: left;
    }

    .post-thumb img {
        display: block;
        width: 42px;
        height: 42px;
    }

    .post-content {
        margin-left: 50px;
    }
</style>

<body>
    <div class="post-container">
        <div class="post-thumb"><img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg" /></div>
        <div class="post-content">
            <p>“People say nothing is impossible, but I do nothing every day."</p>
            <p>– A. A. Milne</p>
        </div>
    </div>
</body>

Наиболее примечательно, что я добавил display: block; к изображению и установил margin-left: 50px; для текстового содержимого.

РЕДАКТИРОВАТЬ https://www.w3schools.com/code/tryit.asp?filename=GAUA575L092N

<style>
    body {
        width: 15em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .post-container {
        margin: 20px 20px 0 0;
        overflow: auto;
    }

    .post-thumb {
        margin-top: 30px;
        float: left;
    }

    .post-thumb img {
        display: block;
        width: 42px;
        height: 42px;
    }

    .post-content {
        margin-left: 50px;
    }
</style>

<body>
    <div class="post-container">
        <div class="post-thumb"><img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg" /></div>
        <div class="post-content">
            <p>“People say nothing is impossible, but I do nothing every day."</p>
            <p>– A. A. Milne</p>
        </div>
    </div>
</body>

Я добавил дизайн кузова обратно. На изображении есть margin-top, которое выталкивает его вниз, чтобы отцентрировать по отношению к тексту, но если вы хотите, чтобы изображение появилось в левом верхнем углу текста, просто удалите margin-top: 30px из класса .post-thumb.

Лучшим вариантом было бы использовать что-то вроде flexbox для этого, однако.

РЕДАКТИРОВАТЬ 2:

Я обновил свой код до используйте flexbox, который является намного более чистым и кратким решением. Вы можете прочитать больше о здесь .

"Это подход к созданию макета, выравниванию элементов и распределению дополнительного пространства.

Flex означает гибкий Адаптивные. Flexbox-ы, таким образом, являются гибкими элементами макета. Одним из главных преимуществ flexbox-ов является возможность заполнять дополнительное пространство без необходимости использования Javascript. "

https://www.w3schools.com/code/tryit.asp?filename=GAUAC9HBCS2S

<style>
    body {
        width: 15em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .flex-item {
        display: flex;
        align-items: center;
    }

    .flex-item img {
        flex-grow: 0;
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        margin-right: 15px;
    }
</style>

<body>
    <div class="flex-item">
        <img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg">
        <div>
            <p>“People say nothing is impossible, but I do nothing every day."</p>
            <p>– A. A. Milne</p>
        </div>
    </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...