Question

我有一个包含img，p标签和h6文本的div。我想将文本漂浮在图片的右侧而不是将其包裹起来。

我尝试过左右浮动并清除，在div上显示内联块并浮动img，但我无法让它看起来正确。

<div class="col">
  <img src="images/homepage-blue-icon.png" class="body-img" title="Me" alt="Me" align="left" />
  <h6>Blueberries</h6>
  <p>Healthy and nutritious</p>
</div>

Answer 1

有几种方法：

float和margin

＆＃13;

h6,
p {
  margin :0 0 0 55px;
}

.body-img {
  float: left;
}

＆＃13;

<div class="col">
  <img src="http://lorempixel.com/50/50/" class="body-img" title="Me" alt="Me" />
  <h6>Blueberries</h6>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
</div>

＆＃13;

float和padding

＆＃13;

h6,
p {
  padding :0 0 0 55px;
}

.body-img {
  float: left;
}

＆＃13;

<div class="col">
  <img src="http://lorempixel.com/50/50/" class="body-img" title="Me" alt="Me" />
  <h6>Blueberries</h6>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
</div>

＆＃13;

display:grid其他教程：https://css-tricks.com/snippets/css/complete-guide-grid/

＆＃13;

.col {
display:grid ;
grid-template-columns:60px 1fr;
}
.col> * {
grid-column:2;
}
.col img {
grid-column:1;
grid-row:1/span 2;
}

＆＃13;

<div class="col">
  <img src="http://lorempixel.com/50/50/" class="body-img" title="Me" alt="Me" />
  <h6>Blueberries</h6>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
</div>

＆＃13;

如果你包装图片，请

display:table / table-cell;。它也可以允许垂直对齐，将图像悬停在中间对齐。

＆＃13;

.col {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.left {
  display: table-cell;
  width: 60px;
  vertical-align:top;
}

.left:hover {
  vertical-align: middle;
}

＆＃13;

<div class="col">
  <div class="left"><img src="http://lorempixel.com/50/50/" class="body-img" title="Me" alt="Me" /></div>
  <h6>Blueberries</h6>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
</div>

＆＃13;

Answer 2

也许你可以将它们放在一行的表中？

<table>
  <tr>
    <td>
        <img style='' src="img.jpg" class="body-img" title="Me" alt="Me" align="left" />

    </td>

    <td>
      <div>
        <h6>Blueberries</h6>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate
          velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
          occaecat cupidatat non proident, sunt in culpa qui officia deserunt
           mollit anim id est laborum."
        </p>
      </div>
    </td>
  </tr>
</table>

显示div中img旁边的文本

2 个答案: