Question

我想要达到的是以下设计：

enter image description here

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

我尝试使用float属性，使用margin和padding来获取差距，但我不能让它们居中。

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

Answer 1

你可以这样做

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

Answer 2

将display: table与margin: 0 auto一起用于居中区块，将display: table-cell与padding一起用于其子级。如果需要，为居中的块设置百分比width。

Answer 3

像this之类的东西？

HTML：

<!doctype html>
<html>
<body>
<div class="wrapper">
<div class="column">
<div class="column1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in libero interdum ante vulputate viverra non vehicula sapien. Sed ac posuere sapien. Morbi a massa leo, sed hendrerit odio. Aliquam in diam in mauris elementum fringilla. Maecenas vestibulum massa at massa imperdiet eu venenatis velit sagittis. Donec nec libero vel ipsum mattis cursus. Ut vel tortor id lectus rhoncus laoreet. Aliquam volutpat rhoncus arcu et euismod. Phasellus pulvinar condimentum lacus non dictum. In nisi lorem, ultrices quis convallis vel, consectetur vulputate arcu. Quisque malesuada bibendum nulla, at facilisis quam facilisis sed. Pellentesque pellentesque, mi ut dictum suscipit, arcu nisl consequat urna, vitae auctor arcu quam a felis. Proin consectetur fermentum leo sit amet faucibus.
</div>
</div>
<div class="column">
<div class="column2">
Maecenas quis interdum est. Phasellus ut erat nec ligula blandit cursus. Nulla laoreet viverra interdum. Etiam sagittis porttitor elit id egestas. Morbi at nunc turpis, ut interdum magna. Nam eget dui metus. In aliquet dui non nisl porttitor et pretium nisi tristique. Vivamus non eros ut ligula pharetra porta. Suspendisse suscipit dignissim nibh, vitae auctor ligula condimentum et. In sit amet ultrices sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</div>
</div>
</body>
</html>

CSS：

body {padding:30px;}
.wrapper {margin:30px auto;}
.column {width:50%;float:left;}
.column1 {padding-right:20px;}
.column2 {padding-left:20px;}

Answer 4

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

#leftBlock {
    margin-left: auto;
}

#rightBlock {
    margin-right: auto;
}

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

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

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

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

4 个答案: