html - 如何在 Flexbox 中的两个 div 之间添加边距/空间
问题描述
我有一个左栏和一个右栏。右列 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;
}
推荐阅读
- linux - 在 docker-compose 命令中使用内联注释
- json - 如何从 JSON 响应正文中获取值并将其设置为 Postman 中的环境变量
- java - Spring boot 中的错误映射(Whitelabel Error Page)
- python - 将 json 数组中的键附加(映射)到另一个子数组
- javascript - Rails Webpacker - 未捕获的类型错误:$(...).tooltip 不是函数
- sql - ORDER BY 中的查询会被重复评估吗?
- python - 如何列出该包内未调用的python包的函数
- ruby - 如何在我的规范文件中包含图像路径?
- c# - 无法使用 XamlIslands 通过 WPF 发布 UWP:未找到 Microsoft.Windows.UI.Xaml.CSharp.targets
- java - 编写一个方法,将提供的二进制数字(作为字符串)转换为十进制数