如何让盒子遍历div？
如何让盒子遍历div？
提问于 2021-08-24 08:07:30
我正在制作一个网页，我在div行中有3列，我想让它们遍历div。我需要做什么才能做到这一点呢？
我尝试过使用flex box，z索引定位等，但都不起作用。下面是我想要的样子：
这就是它现在的样子：
下面是我到目前为止得到的代码：
.column1 {
float: left;
width: 33.33%;
text-align: center;
background-color: #e5e4e2;
padding-top: 100px;
padding-bottom: 100px;
width: 300px;
margin-left: 130px;
margin-right: 160px;
padding-left: 20px;
padding-right: 20px;
border-radius: 10%;
box-shadow: 0 4px 2px -2px #5E5E5E;
}
.column2 {
float: left;
width: 33.33%;
text-align: center;
background-color: #a9a9a9;
padding-top: 100px;
padding-bottom: 100px;
width: 300px;
margin-left: 0px;
margin-right: 160px;
padding-left: 20px;
padding-right: 20px;
border-radius: 10%;
box-shadow: 0 4px 2px -2px #5E5E5E;
}
.column3 {
float: left;
width: 33.33%;
text-align: center;
background-color: #000000;
color: #fff;
padding-top: 100px;
padding-bottom: 100px;
width: 300px;
margin-left: 0px;
margin-right: 130px;
padding-left: 20px;
padding-right: 20px;
border-radius: 10%;
box-shadow: 0 4px 2px -2px #5E5E5E;
}<div style="float:left;width:100%;background-color: #c5c5c5;margin-top:100px;padding-top:100px;">
<h3 style="text-align: center;font-size:30pt">Are thinking all the time about...</h3>
<h3 style="text-align: center;padding-bottom: 100px;font-size:30pt">(how to solve main problem), then these 3 ideas for you</h3>
<div class="row">
<div class="column1"><img style="padding-bottom:20px" src="images/circle.png">
<h3 style="padding-bottom:20px;font-size:16pt">Method 1</h3>
<p style="font-size: 14pt;">Visual icon above and subtext comes here</p>
</div>
<div class="column2"><img style="padding-bottom:20px" src="images/circle.png">
<h3 style="padding-bottom:20px;font-size:16pt">Method 2</h3>
<p style="font-size: 14pt;">Visual icon above and subtext comes here</p>
</div>
<div class="column3"><img style="padding-bottom:20px" src="images/circle.png">
<h3 style="padding-bottom:20px;font-size:16pt">Method 3</h3>
<p style="font-size: 14pt;">Visual icon above and subtext comes here</p>
</div>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2021-08-24 08:18:47
编辑:只要改变容器的高度就可以了。请在此处查看演示- https://codepen.io/tomdringer/pen/XWgWxKr
你能不能只给灰色背景一个特定的高度，然后overflow: visible？另外，使用CSS时，不要重复自己。让你的css像这样：
.column {
float: left;
width: 33.33%;
text-align: center;
padding: 100px 20px;
width: 300px;
margin-left: 130px;
margin-right: 160px;
border-radius: 10%;
box-shadow: 0 4px 2px -2px #5E5E5E;
}
.column1{
background-color: #e5e4e2;
}
.column2{
background-color: #a9a9a9;
}
.column3{
background-color: #000000;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68903898
复制相关文章
相似问题
腾讯云开发者
