Question

如何使用float对齐文本和图像？我用红色标记了文本，该文本应与浮动图像相对应。我不知何故无法将圈出的文字放到正确的位置。

图像的我的CSS：

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

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

非常感谢

Answer 1

请参见下面的代码

.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>

Answer 2

这是我提出的一种您可以适应的解决方案：

<!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>

在浮动img上对齐文本

2 个答案: