我怎样才能让它整洁？

Question

the work waiting to be done

我希望它们在尺寸上固定;就像没有共享边界的桌子一样。

这是我的html和css代码：

＆＃13;

＆＃13;

.leftsubstancelist {
  padding-top: 40px;
  border-top: 2px solid #003333;
  width: 39%;
  float: left;
}

.rightsubstancelist {
  padding-top: 40px;
  border-top: 2px solid #003333;
  width: 39%;
  float: right;
}

.leftsubstancelist figure {
  border: 3px solid #003333;
}

.rightsubstancelist figure {
  border: 3px solid #003333;
}

figure img {
  max-width: 80%
}

＆＃13;

<section class="leftsubstancelist">
  <figure>
    <img src="img/active_substance/vankomisin.png" alt="Vankomisin Hidroklorür" align="center">
    <figcaption>Vankomisin Hidroklorür</figcaption>
  </figure>

  <br>

  <figure>
    <img src="img/active_substance/imipenem_silastatin.png" alt="İmipenem / Silastatin" align="center">
    <figcaption>İmipenem / Silastatin</figcaption>
  </figure>

</section>

<section class="rightsubstancelist">

  <figure>
    <img src="img/active_substance/ertapenem.png" alt="Ertapenem" align="center">
    <figcaption>Ertapenem</figcaption>
  </figure>

  <br>

  <figure>
    <img src="img/active_substance/teikoplanin.png" alt="Teikoplanin" align="center">
    <figcaption>Teikoplanin</figcaption>
  </figure>
</section>

＆＃13;

＆＃13;

＆＃13;

我试过，显示：框，对齐：中心和其他一些相关的东西，但无法设法整理它们。

感谢您的帮助！

Answer 1

尝试以下：

<style>
.divSquare1{
width:45%; height:200px; margin:4px; border:1px solid black; float: left
}
.divSquare2{
width:45%; height:200px; margin:4px; border:1px solid black; float: right
}
.space{
width:5%;
}
</style>    

<div class="divSquare1">
<figure>
    <img src="img/active_substance/vankomisin.png" alt="Vankomisin Hidroklorür" align="center">
    <figcaption>Vankomisin Hidroklorür</figcaption>
</figure>
</div>
<div class="divSquare2">
<figure>
    <img src="img/active_substance/imipenem_silastatin.png" alt="İmipenem / Silastatin" align="center">
    <figcaption>İmipenem / Silastatin</figcaption>
</figure>
</div>
<div style='clear:both' class="space"></div>
<div class="divSquare1">
<figure>
    <img src="img/active_substance/ertapenem.png" alt="Ertapenem" align="center">
    <figcaption>Ertapenem</figcaption>
</figure>
</div>
<div class="divSquare2">
<figure>
    <img src="img/active_substance/teikoplanin.png" alt="Teikoplanin"   align="center">
    <figcaption>Teikoplanin</figcaption>
</figure>
</div>

Answer 2

使用flexbox。

如果您希望所有行都是连续的高度，则可以省略align-items或将其设置为stretch。否则，当您希望它们具有单独的高度但在顶部呈现时，您可以使用align-items: flex-start。

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  display: flex;
  justify-content: space-between;
  /* Uncomment the following line, if the
     rows cell can have different heights */
  /* align-items: flex-start; */
  flex-wrap: wrap;
  border-top: 2px solid #003333;
  padding: 20px;
}

figure {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
  border: 3px solid #003333;
  width: calc( 50% - 40px );
  margin: 20px;
}

figure img {
  width: 100%;
  height: auto;
}

<section>
  <figure>
    <img src="http://via.placeholder.com/320x140" />
    <figcaption>Vankomisin Hidroklorür</figcaption>
  </figure>

  <figure>
    <img src="http://via.placeholder.com/320x160" />
    <figcaption>İmipenem / Silastatin</figcaption>
  </figure>

  <figure>
    <img src="http://via.placeholder.com/320x180" />
    <figcaption>Ertapenem</figcaption>
  </figure>

  <figure>
    <img src="http://via.placeholder.com/320x120" />
    <figcaption>Teikoplanin</figcaption>
  </figure>
</section>

Answer 3

为图元素设置静态高度。这将使它们都具有相同的高度和间距。我相信这会解决您的问题，但您的问题很模糊。

figure {
  height: 150px;
}