我无法将这些元素与其下方的文本并排对齐。我尝试了显示柔性、显示内联块、显示块，但一切都有效。（感谢建议 flexbox 的用户。这是个好主意。）你能帮助我吗？谢谢这是我的代码.titlebox { width: 100%; height: 300; background-color: #6cbf49; font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700px; text-align: center; color: white; display: block;}.heroimg { width: 100%;}.items {}.container { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); width: 200px; height: 200px; border-radius: 50%; text-align: center;}#circle1 { background-color: red; margin: 10px;}#circle2 { background-color: yellow; margin: 10px;}#circle3 { background-color: green; margin: 10px;}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div class="titlebox"> <br> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</h3> <h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</h3> <br> </div> <img class="heroimg" src="https://placeimg.com/1000/400/any"> <div class="item"> <div id="circle1" class="container"> </div> <p class="texto">Lorem Ipsum</p> <div id="circle2" class="container"> </div> <p class="texto">Lorem Ipsum/p> <div id="circle3" class="container"> </div> <p class="texto">Lorem Ipsum</p> </div></body></html>这是我正在尝试做的一个例子。例子非常感谢。
1 回答
慕田峪9158850
TA贡献1794条经验 获得超7个赞
我已经为你使用了flexbox。我对此感到更舒服。我只是做了你的主要问题，你仍然可以优化它。我刚刚在新的 div 中添加了 cirlce 和 lorems，以在项目类中应用 flex 属性。
.titlebox {
width: 100%;
height: 300;
background-color: #6cbf49;
font-family: 'Playfair Display', serif;
font-size: 18px;
font-weight: 700px;
text-align: center;
color: white;
display: block;
}
.heroimg {
width: 100%;
}
.container {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 200px;
height: 200px;
border-radius: 50%;
}
.item {
display: flex;
text-align: center;
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
}
#circle1 {
background-color: red;
margin: 10px;
}
#circle2 {
background-color: yellow;
margin: 10px;
}
#circle3 {
background-color: green;
margin: 10px;
}
<div class="titlebox">
<br>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</h3>
<h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</h3>
<br>
</div>
<img class="heroimg" src="https://placeimg.com/1000/400/any">
<div class="item">
<div>
<div id="circle1" class="container">
</div>
<p class="texto">Lorem Ipsum</p>
</div>
<div>
<div id="circle2" class="container">
</div>
<p class="texto">Lorem Ipsum</p>
</div>
<div>
<div id="circle3" class="container">
</div>
<p class="texto">Lorem Ipsum</p>
</div>
</div>
- 1 回答
- 0 关注
- 79 浏览
添加回答
举报
0/150
提交
取消