<分区>
<分区>
我有一个左列和一个右列。右列 Div 元素的显示值为 Flex，但我无法在其两个子 Div 元素之间添加边距或空格。
我在堆栈溢出上找到了一个答案，它建议我使用 Justify-content: space-around
但这似乎没有用。我正在使用码笔平台练习。
body {
margin: 0 auto;
width: 100%;
max-width: 2500px;
padding: 0;
}
* {
box-sizing: border-box;
}
header {
background: blue;
width: 100%;
height: 100px;
}
a {
text-decoration: none;
text-align: center;
color: #ffffff;
font-size: 1.15em;
}
h1 {
position: absolute;
top: 15px;
left: 10px;
float: left;
left-margin: 6%;
margin-top: 10px;
padding: 3px;
}
ul {
float: right;
margin: auto;
margin-top: 37px;
}
li {
display: inline-block;
padding-left: 20px;
padding-right: 10px;
}
.lastlist {
padding-right: 30px;
}
.wrapper {
width: 100%;
margin: 0 auto;
padding: 0;
}
.leftcolumn {
padding: 30px;
float: left;
width: 70%;
background: grey;
height: 2000px;
display: grid;
grid-template-rows: 200px 200px 200px;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
border-radius: 1px;
}
.box1 {
grid-column: 1/3;
}
.rightcolumn {
padding: 30px;
float: left;
width: 30%;
background: pink;
height: 2000px;
border-radius: 1px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.rightbox1 {
flex: 1 30px;
margin-left: 2%;
}
.rightbox2 {
flex: 1 30px;
}
div {
background: white;
border-radius: 5px;
padding: 10px;
}<header>
<h1>Daniel Savva</h1>
<nav>
<ul>
<li> <a href="#"> Home</a> </li>
<li> <a href="#"> Portfolio</a> </li>
<li> <a href="#"> Gallery</a> </li>
<li> <a href="#"> Contact</a> </li>
<li class="lastlist"> <a href="#"> Services</a> </li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="leftcolumn">
<div class="box1">hi</div>
<div>hi</div>
<div>hi</div>
<div>hi</div>
<div>hi</div>
</div>
<div class="rightcolumn">
<div class="rightbox1">hello</div>
<div class="rightbox2">hello</div>
</div>
</div>最佳答案
请用给定的 css 替换“rightcolumn”子 css。
.rightbox1 {
flex: 1 1 auto;
margin: 5px;
}
.rightbox2 {
flex: 1 1 auto;
margin: 5px;
}
关于html - 如何在 Flexbox 中的两个 div 之间添加边距/空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58199074/