html - 与段落相关的 CSS 图像对齐

Question

所以我想给我的用户上传图片并将其与文本中的段落相关的选项。我想提供的选项是：

所以，我解决这个问题的方法是在位置 1、2 和 3 以及 6、7 和 8 的所有图像之后添加一个清晰的元素。出于编辑的原因（用户应该能够“实时”更改位置并查看结果直接）我想完全删除那个清除元素，但仍然有这些选项。位置 2、4、5 和 7 没问题，是左/右对齐的上/下导致问题，我不知道如何解决这个问题。欢迎任何指点

.img {
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  padding: 10px;
}

.imgpos_1 {
  float: left;
  margin-bottom: 1em;
  margin-right: 1em;
}

.imgpos_2 {
  text-align: center;
  margin: 0 auto 1em;
}

.imgpos_3 {
  float: right;
  margin-bottom: 1em;
}

.imgpos_4 {
  float: left;
  margin-right: 1em;
}

.imgpos_5 {
  margin-left: 1em;
  margin-bottom: 1em;
  float: right;
}

.imgpos_6 {
  float: left;
  margin-bottom: 1.5em;
}

.imgpos_7 {
  text-align: center;
  margin: 0 auto 1em;
}

.imgpos_8 {
  float: right;
  margin-bottom: 1.5em;
}

<div class="img imgpos_1">1: over to the left</div>
<div class="img imgpos_2">2: over, centered</div>
<div class="img imgpos_3">3: over to the right</div>
<div class="img imgpos_4">4: left-aligned in text</div>
<div class="img imgpos_5">5: right-aligned in text</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent molestie, felis id tempus fringilla, mi metus aliquam nunc, tristique elementum sem purus vel libero. Mauris ac rutrum velit. Suspendisse at cursus nibh, et dictum tellus. Mauris venenatis elit eget nulla porta, ultricies ornare sem convallis. Aliquam magna lectus, congue sit amet rhoncus in, efficitur ut metus. In congue eget magna quis aliquet. Nulla ullamcorper rhoncus leo, et tempor nisi pellentesque vel. Integer ornare lacus blandit dolor bibendum feugiat. Integer eu metus et lacus feugiat rutrum at sed justo. Duis vel tellus magna. Suspendisse quam nisi, porta et erat nec, porttitor feugiat nunc. Morbi at tortor vel sem condimentum rhoncus. Nunc bibendum gravida odio, et finibus dui posuere sit amet.
</p>
<div class="img imgpos_6">6: under to the left</div>
<div class="img imgpos_7">7: under, centered</div>
<div class="img imgpos_8">8: under to the right</div>


<div class="img imgpos_1">1: over to the left</div>
<div class="img imgpos_3">3: over to the right</div>
<p>
  Phasellus lacinia, nisl at lobortis sollicitudin, enim ante auctor enim, id sagittis massa diam eu dui. Mauris sed ultrices dolor. Curabitur ut quam vitae ligula congue fringilla. Nullam vitae vestibulum turpis, non posuere est. Vivamus faucibus iaculis bibendum. Pellentesque ut lectus erat. Praesent dictum suscipit metus, eu blandit diam. Ut tempor mattis felis maximus rutrum. Quisque tristique elementum iaculis. Vestibulum lacinia venenatis ligula, laoreet molestie libero semper id.
</p>

这是我希望最终结果看起来如何的图像：

标签： htmlcss

Answer 1

更新您的代码，如下所示：

.img {
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  padding: 10px;
}
/* added */
body {
 text-align:center;
}
p {
 text-align:left;
}
/**/
.imgpos_1 {
  float: left;
  clear:left; /* added */
  margin-bottom: 1em;
  margin-right: 1em;
}
/* added */
.imgpos_3 + p,
.imgpos_1 + p,
.imgpos_2 + p{
  clear:both;
}
/**/

.imgpos_2 {
  display:inline-block; /* added */
  margin: 0 auto 1em;
}

.imgpos_3 {
  float: right;
  clear:right; /* added */
  margin-bottom: 1em;
}

.imgpos_4 {
  float: left;
  clear:left; /* added */
  margin-right: 1em;
}

.imgpos_5 {
  margin-left: 1em;
  margin-bottom: 1em;
  float: right;
  clear:right; /* added */
}

.imgpos_6 {
  float: left;
  clear:left; /* added */
  margin-bottom: 1.5em;
}

.imgpos_7 {
  display:inline-block; /* added */
  margin: 0 auto 1em;
}

.imgpos_8 {
  float: right;
  clear:right; /* added */
  margin-bottom: 1.5em;
}

<div class="img imgpos_1">1: over to the left</div>
<div class="img imgpos_2">2: over, centered</div>
<div class="img imgpos_3">3: over to the right</div>
<div class="img imgpos_4">4: left-aligned in text</div>
<div class="img imgpos_5">5: right-aligned in text</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent molestie, felis id tempus fringilla, mi metus aliquam nunc, tristique elementum sem purus vel libero. Mauris ac rutrum velit. Suspendisse at cursus nibh, et dictum tellus. Mauris venenatis elit eget nulla porta, ultricies ornare sem convallis. Aliquam magna lectus, congue sit amet rhoncus in, efficitur ut metus. In congue eget magna quis aliquet. Nulla ullamcorper rhoncus leo, et tempor nisi pellentesque vel. Integer ornare lacus blandit dolor bibendum feugiat. Integer eu metus et lacus feugiat rutrum at sed justo. Duis vel tellus magna. Suspendisse quam nisi, porta et erat nec, porttitor feugiat nunc. Morbi at tortor vel sem condimentum rhoncus. Nunc bibendum gravida odio, et finibus dui posuere sit amet.
</p>
<div class="img imgpos_6">6: under to the left</div>
<div class="img imgpos_7">7: under, centered</div>
<div class="img imgpos_8">8: under to the right</div>


<div class="img imgpos_1">1: over to the left</div>
<div class="img imgpos_3">3: over to the right</div>
<p>
  Phasellus lacinia, nisl at lobortis sollicitudin, enim ante auctor enim, id sagittis massa diam eu dui. Mauris sed ultrices dolor. Curabitur ut quam vitae ligula congue fringilla. Nullam vitae vestibulum turpis, non posuere est. Vivamus faucibus iaculis bibendum. Pellentesque ut lectus erat. Praesent dictum suscipit metus, eu blandit diam. Ut tempor mattis felis maximus rutrum. Quisque tristique elementum iaculis. Vestibulum lacinia venenatis ligula, laoreet molestie libero semper id.
</p>