我有两个 <div>
的,每个都设置为其容器宽度的 45%。有没有办法使 <div>
居中?使得它们在容器的左右两侧有相同的空间,并且它们之间也有空间。
一开始我只是做了每个 <div>
50% 并且有 padding: 0px 25px;
在容器上,这样它们就不会从一边跑到另一边。问题是左边右边<div>
向右跑到右边的左边<div>
我想在它们之间留一些空间。
当我尝试使用 margin
在它们之间留出空间时或 padding
, 对<div>
会被移到左边下方,而不是留在它旁边。
最佳答案
将第一个元素的 margin-right 设置为百分比宽度:
.first {
float: left;
width: 45%;
margin-right: 10%;
}
.second {
float: left;
width: 45%;
}
在这里查看 JSFiddle:https://jsfiddle.net/1nkaa05z/
如果你需要在每个元素的外边缘留出一些空间,你可以将第一个元素的margin-left设置为2%,第二个元素的margin-right设置为2%,将第二个元素的margin-right设置为第一个元素(分隔符)到 6%。只要剩余宽度不超过 10%,第二个元素就不应换行。
关于css - 在页面上居中放置 2 个 DIV,每个 DIV 占 45%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28910341/