выровнять текст на плавающем img - PullRequest
Новая
       4

выровнять текст на плавающем img

0 голосов
/ 10 декабря 2018

как выровнять текст и изображение с помощью float?Я пометил текст красным, который должен соответствовать плавающему изображению.Каким-то образом мне не удается вернуть обведенный текст в правильное положение.

enter image description here

мой css для изображений: 

   .floatinglleft{
     margin-right: 16px; float: left;
}   

  .floatingright{
     margin-left:  16px; float: right;
}

большое спасибо заранее

Ответы [ 2 ]

0 голосов
/ 10 декабря 2018

Вот одно решение, которое я сделал, чтобы вы могли адаптировать: 

<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="UTF-8">
    <title>
        Title
    </title>
    <style>
        img {
            width: 200px;
        }

        .picture-float-left {
            float: left;
            margin: 0 10px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="picture-float-left">
        <img src="picture.jpg" alt="sample picture">
        <div>Caption under picture</div>
    </div>
    <p>
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </p>
</body>

</html>
0 голосов
/ 10 декабря 2018

см. Ниже код 

.thumb {
    float: left;
    border: 1px solid black;
    width: 150px;
    text-align: center;
    margin-right: 10px;
}
img{
  max-width: 100%;
}
.desc{
  float:none;
}
<div class="thumb">
  <img class="floatright" src="https://cdn-images-1.medium.com/max/2000/1*kOuvkQUrByiaqZYTZFJz4g.png" alt="foo"/>
  <p>
  Lorem ipsum dolor
  </p>
</div>
<div class="desc">
<p>
Lorem ipsum dolor sit amet, cu quo duis aperiam, id has ferri placerat suavitate. Vis oratio bonorum ei, discere delicata pro no. Erant maiestatis et cum. Est iusto veritus et, liber tollit sensibus his eu. Eam cu errem persius.

Sumo accusata eam id. Te expetenda iudicabit delicatissimi ius. Nec ut laoreet argumentum, sed ad erat libris. Vim ullum omnium te. Mel mazim noster delicatissimi no, conceptam philosophia vim ea, vix esse soleat mucius in. Ne quod explicari pri, eam diceret nonumes accumsan id.

Lorem ipsum dolor sit amet, cu quo duis aperiam, id has ferri placerat suavitate. Vis oratio bonorum ei, discere delicata pro no. Erant maiestatis et cum. Est iusto veritus et, liber tollit sensibus his eu. Eam cu errem persius.

Sumo accusata eam id. Te expetenda iudicabit delicatissimi ius. Nec ut laoreet argumentum, sed ad erat libris. Vim ullum omnium te. Mel mazim noster delicatissimi no, conceptam philosophia vim ea, vix esse soleat mucius in. Ne quod explicari pri, eam diceret nonumes accumsan id.

Lorem ipsum dolor sit amet, cu quo duis aperiam, id has ferri placerat suavitate. Vis oratio bonorum ei, discere delicata pro no. Erant maiestatis et cum. Est iusto veritus et, liber tollit sensibus his eu. Eam cu errem persius.

Sumo accusata eam id. Te expetenda iudicabit delicatissimi ius. Nec ut laoreet argumentum, sed ad erat libris. Vim ullum omnium te. Mel mazim noster delicatissimi no, conceptam philosophia vim ea, vix esse soleat mucius in. Ne quod explicari pri, eam diceret nonumes accumsan id.


 </p>
 </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...