Question

如何编写HTML和CSS以使图像在文本旁边对齐（每行交替排列），然后将它们叠加在另一个上面以进行响应视图

＆＃13;

.row {
  display: block;
  width: 100%;
}
.container {
  display: inline-block;
}
.left {
  float: left;
}
.right {
  float: right;
}

＆＃13;

<div class="row">
  <img class="right" src="" width="300" height="300" />
  <div class="container">

    <h1>Heading</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mollis magna nunc, a condimentum mauris ultrices vel. Pellentesque lobortis, neque ut rutrum vehicula, turpis quam tincidunt nisl, a placerat est justo vitae nibh. Fusce eleifend varius
      lorem et vulputate. Nullam pellentesque metus eros, et pretium mauris placerat nec. Suspendisse at est at enim condimentum dapibus. Vivamus eu cursus tellus, nec aliquam sapien. Proin feugiat diam sed nibh varius interdum. Sed aliquam lorem vel
      nulla posuere, feugiat porttitor tortor lobortis. Cras imperdiet bibendum enim efficitur laoreet.</p>
  </div>
</div>
<div class="row">
  <div class="container">

    <h1>Heading</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mollis magna nunc, a condimentum mauris ultrices vel. Pellentesque lobortis, neque ut rutrum vehicula, turpis quam tincidunt nisl, a placerat est justo vitae nibh. Fusce eleifend varius
      lorem et vulputate. Nullam pellentesque metus eros, et pretium mauris placerat nec. Suspendisse at est at enim condimentum dapibus. Vivamus eu cursus tellus, nec aliquam sapien. Proin feugiat diam sed nibh varius interdum. Sed aliquam lorem vel
      nulla posuere, feugiat porttitor tortor lobortis. Cras imperdiet bibendum enim efficitur laoreet.</p>
  </div>
  <img class="left" src="" width="300" height="156" />
</div>

＆＃13;

请我帮忙，因为我在这里停留了很长时间。 [链接到有问题的图像] [1] ！[元素的定位] [1]

带元素的图像：hudicek [dot] si / CSS [dot] jpg

Answer 1

检查一下。

http://jsfiddle.net/e7e1bhdd/

别忘了使用

clear: both;

浮动后

如何将图像对齐文本然后叠加它们（响应）

1 个答案: