我無法將這些元素與其下方的文本并排對齊。我嘗試了顯示柔性、顯示內聯塊、顯示塊，但一切都有效。（感謝建議 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 關注
- 105 瀏覽
添加回答
舉報
0/150
提交
取消