html - 如何将div彼此排列？

如何将div彼此排列？
我已经尝试过float，clear的所有位置，但是不起作用。

img {
  float: left;
  padding-right: 15px;
}

1 {
  position: absolute;
  clear: left;
}

2 {
  position: absolute;
}

<div id="1">
  <img src="//via.placeholder.com/300x300" alt="imagine" width=300 height=300 />
  <p>Mos Goriot - Honore de Balzac<br> 10 lei</p><br>
</div>

<div id="1">
  <p><img src="//via.placeholder.com/220x300" alt="imagine" width=220 height=300 /> Peter Camenzind - Herman Hesse<br>15 lei</p>
</div>

这是当前外观的屏幕截图：

最佳答案

您的代码有两个问题：


IDs must be unique。
要在CSS中引用ID，请从#符号开始。


  #id_value {样式属性}


请参见CSS ID Selectors @ MDN。




在下面，我正在使用“ clearfix”方法。有关更多参考，请参见：
What is a clearfix?
What methods of clearfix can I use?
Chris Coyier on Clearfix

.group:after {
  content: "";
  display: table;
  clear: both;
}

.entry {
  margin: 0 0 1em;
}

img {
  float: left;
  margin-right: 15px;
}

<div class="entry group">
  <img src="//via.placeholder.com/300x300" alt="imagine" width=300 height=300 />
  <p>Mos Goriot - Honore de Balzac<br> 10 lei</p>
</div>

<div class="entry group">
  <img src="//via.placeholder.com/220x300" alt="imagine" width=220 height=300 />
  <p>Peter Camenzind - Herman Hesse<br>15 lei</p>
</div>

关于html - 如何将div彼此排列？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49200528/