并排对齐各种图像下的文本
我无法将这些元素与其下方的文本并排对齐。我尝试了显示柔性、显示内联块、显示块，但一切都有效。（感谢建议 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
我已经为你使用了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>
随时随地看视频慕课网APP
相关分类
Html5
