Html 如何使用CSS使两个块中间有一些间隙？

我希望达到以下设计：

两个文本块之间有一些间隙，围绕页面中线对齐（见图）

我尝试使用

float

属性，使用

margin

和

padding

来获得间隙，但无法将它们居中

编辑：

---

我忘了指出箭头显示了可调整大小的部分：因此，页面宽度必须是可调整的，而文本本身不是，但文本是动态内容，可以在页面之间更改，因此无法仅定义以像素为单位的恒定宽度。

您可以这样做

<div id="wrapper">       <!-- wrapper will be in the middle of the page -->
   <div id="box1"></div> <!-- Your First Box -->
   <div id="box2"></div> <!-- Second Box -->
</div>

#wrapper { width: 1000px; margin: 0 auto }
#box1 { width: 400px; float: left; }
#box2 { width: 400px; float: right; }
/* There Will be 200px gap in between of two boxes */

#包装{宽度：1000px；边距：0自动}
#框1{宽度：400px；浮点：左；}
#框2{宽度：400px；浮点：右；}
/*两个盒子之间将有200像素的间隙*/

使用

显示：表格

带

边距：0自动

用于居中块，使用

显示：表格单元格

带百分比

填充

用于其子项。如果需要，为居中块设置百分比

宽度

。

类似于

HTML:

---

对于左侧块，将左侧边距设置为“自动”。对于右侧块，设置右侧。像这样：

#leftBlock {
    margin-left: auto;
}

#rightBlock {
    margin-right: auto;
}

这使它们背对背地出现在屏幕中央。 要在块之间添加空间，请将另一个边距设置为某个已定义的量：

#leftBlock {
    margin-left: auto;
    margin-right: 5%;
}

#rightBlock {
    margin-right: auto;
    margin-left: 5%;
}

---

您是否尝试过将表格与align组合？哪些部分是固定宽度的，哪些部分在调整窗口大小时会改变宽度？@Anton:是的，表格是当前的解决方案，但我想在我的设计中删除所有不需要它们的表格，并使用CSS。@thirtydot您完全正确，我在回答中忘了提到它。现在我把这些信息添加到问题中。非常感谢！！我忘了提到页面宽度必须可以调整大小。文本是动态的，可以具有不同的宽度，因此无法事先将其宽度设置为常量。很抱歉一开始没提到！！上面的解决方案仍然适用于百分比，例如：body{width:100%；}#wrapper{width:80%；margin:0 auto；}#box1{width:45%；float:left；}#box2{width:45%；float:right；}

#leftBlock {
    margin-left: auto;
}

#rightBlock {
    margin-right: auto;
}

#leftBlock {
    margin-left: auto;
    margin-right: 5%;
}

#rightBlock {
    margin-right: auto;
    margin-left: 5%;
}