Html 我怎样才能使它整洁？

我希望它们的大小是固定的；就像一张没有共享边框的桌子

以下是我的html和css代码：

.leftsubstancelist{
填充顶部：40px；
边框顶部：2个实心#003333；
宽度：39%；
浮动：左；
}
右派{
填充顶部：40px；
边框顶部：2个实心#003333；
宽度：39%；
浮动：对；
}
.左派人物{
边框：3px实心#003333；
}
.右派人物{
边框：3px实心#003333；
}
图img{
最大宽度：80%
}

凡科米辛·希德鲁克勒


İmipenem/Silastatin
厄他培南


替考普宁

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

figure {
  height: 150px;
}

请尝试以下内容：

<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>

.1{
宽度：45%；高度：200px；边距：4px；边框：1px纯黑色；浮动：左侧
}
.2{
宽度：45%；高度：200px；边距：4px；边框：1px纯黑色；浮动：右侧
}
.空间{
宽度：5%；
}
凡科米辛·希德鲁克勒
İmipenem/Silastatin
厄他培南
替考普宁

使用

如果希望所有行具有连续的高度，可以省略

对齐项目

，或将其设置为

拉伸

。否则，当您希望项目具有单独的高度但在顶部渲染时，可以使用

align items:flex start

*，*：：之前，*：：之后{
框大小：边框框；
保证金：0；
填充：0；
}
部分{
显示器：flex；
证明内容：之间的空间；
/*如果
单元格中的行可以有不同的高度*/
/*调整项目：灵活启动*/
柔性包装：包装；
边框顶部：2个实心#003333；
填充：20px；
}
身材{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
边框：3px实心#003333；
宽度：计算（50%-40px）；
利润率：20px；
}
图img{
宽度：100%；
高度：自动；
}

凡科米辛·希德鲁克勒
İmipenem/Silastatin
厄他培南
替考普宁

这是一个很好的答案，但这是流动页面和移动/平板电脑兼容性的最佳解决方案吗？@Mustafaugey不，这绝对不是最好的答案。我不知道他想干什么。如果这是一个学校项目或一个静态网站，它将工作良好。如果他试图建立一个化学网站，那么我可以提供一个更好的答案。但因为他没有具体说明，我只是按照我的想法去做。为了将来参考，当我在堆栈溢出上发布答案时，我应该发布最佳答案还是解决问题的答案？另外：如何使图像居中于这些“框”中？他们坚持“向上”和“向左”。非常感谢。我建议，不要浪费你的时间。换句话说，使用任何CSS框架，例如，etcto要使框中的图像居中，可以添加

text align:center

到

图

css阅读评论时，我更新了代码，使图片也居中