html - 如何使用 CSS 让 div 彼此相邻
问题描述
我需要一些帮助。我想把这两个 divparticipation
和benefits
, 并排放置,但我只能编辑 CSS 代码。这是我到目前为止所拥有的:
.supporting {
padding: 150px;
margin-bottom: 40px;
margin-right: 10px;
}
.participation {
margin: 10px 0px 0px 0px;
width: 400px;
height: 400px;
background-color: lightgray;
padding: 30px;
position: relative;
}
#zen-participation {
clear: both;
float: left;
padding-left: 30px;
padding-top: 10px;
}
.benefits {
margin: 10px 0px 0px 0px;
padding: 30px;
background-color: lightcoral;
background-repeat: no-repeat;
position: relative;
width: 80%;
}
#zen-benefits {
clear: both;
float: right;
width: 30%;
padding-left: 30px;
padding-top: 50px;
}
<div class="main supporting" id="zen-supporting" role="main">
<div class="participation" id="zen-participation" role="article">
<h3>Participation</h3>
<p>Strong visual design has always been our focus.....</p>
</div>
<div class="benefits" id="zen-benefits" role="article">
<h3>Benefits</h3>
<p>Why participate? ...</p>
</div>
</div>
解决方案
您可以通过多种方式做到这一点,其中一种是:
添加到父级(.main / .supporting
),以下规则
display: flex
flex-direction: row
像这样:
.supporting {
display: flex;
flex-direction: row;
padding: 150px;
margin-bottom: 40px;
margin-right: 10px;
}
推荐阅读
- python - 将标签转换回原始编码
- python - 没有在哪里部署 Python Flask API 项目
- r - 绘制气泡图:单个轴上的所有路径项
- python - /profile/ 处的 AttributeError
- asynchronous - 异步 gunicorn 抛出 Cors 问题,但 Sync gunicorn 工作正常
- php - PHP Laravel save() 没有更新记录
- python - 如何在 django-models 中以特定/自定义的方式订购数据?
- android - 创建位图而不在 UI 上显示 - 小问题
- xml - xmlstarlet:删除具有特定属性值的标签及其子标签
- python-3.x - PIL 的 Image.rotate() 裁剪图像