如何修复段落元素文本在flexbox中不对齐的问题
如何修复段落元素文本在flexbox中不对齐的问题
提问于 2021-02-11 10:03:19
在使用flexbox时，我无法获取"newDog“div中的p元素。我希望它们都排在左边，这样我就可以将它们均匀地移动到dl内容的下面。
代码如下：
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
body{
background-color: rgb(255, 222, 176);
}
#newDog{
display: flex;
background-color: antiquewhite;
flex-wrap: wrap;
}
#newDog img{
float: left;
margin: 10px 10px 10px 10px;
clear: both
}
#newDog dl{
font-family: 'Montserrat', sans-serif;
position: relative;
align-self: flex-start;
margin-top: 5em;
}
#newDog p{
font-family: 'Montserrat', sans-serif;
font-weight: 600;
position: inherit;
align-self: flex-start;
vertical-align: baseline;
}<body>
<header>
<img src="https://i.imgur.com/zk3.png" alt="Aussies R Us" title="Aussies R Us">
<h1>⚞ Our Aussies ⚟</h1>
</header>
<nav>
<a href="index.html">Home</a> ┃
<a href="ouraussies.html">Our Aussies</a> ┃
<a href="faq.html">FAQ</a> ┃
<a href="contactus.html">Contact Us</a> ┃
</nav>
<main>
<div id="newDog">
<img src="https://i.imgur.com/R3l8.jpg" width="500" height="500" alt="Max" title="Max">
<dl>
<dd>Name: Max</dd>
<dd>Availablility: Not Available</dd>
<dd>Breed: Standard Australian Shepherd</dd>
<dd>Gender: Male</dd>
<dd>Height: 20-25 inches</dd>
<dd>Weight: 50-60 lbs</dd>
<dd>Age: 1-2 Years old</dd>
<dd>Activity Level: Medium - High</dd>
</dl>
<p>
Meet Max! He is a great young Australian Shepherd, he is a very smart dog, and learns quickly. <br>
Max loves to be around people, even though he is not a very good lap dog, he never <br>
wants to be left out of the fun, and will stick around wherever there is people. Max <br>
loves other animals, small and big. He is very gentle when being introduced to other <br>
animals, and tends to watch after his smaller brothers.
</p>
</div>
<br>
<div id="newDog">
<img src="https://i.imgur.com/o2Kp.jpg" width="500" height="500" alt="Odyn" title="Odyn">
<dl>
<dd>Name: Odyn</dd>
<dd>Availablility: Not Available</dd>
<dd>Breed: Mini Australian Shepherd</dd>
<dd>Gender: Male</dd>
<dd>Height: 14-18 inches</dd>
<dd>Weight: 15-25 lbs</dd>
<dd>Age: 4-5 Months old</dd>
<dd>Activity Level: Low - Medium</dd>
</dl>
<p>
Meet Odyn! He is a young pup that is looking to find a good lap to lay on and sleep! <br>
Odyn loves to play with his brothers Max and Jack Jack, but he also loves a good nap. <br>
If you are looking for a pup to laydown and watch a show with, Odyn is the pup for you!
</p>
</div>
<br>
<div id="newDog">
<img src="https://i.imgur.com/MWy.jpg" width="500" height="500" alt="Jack Jack" title="Jack Jack">
<dl>
<dd>Name: Jack Jack</dd>
<dd>Availablility: Not Available</dd>
<dd>Breed: Yorkie</dd>
<dd>Gender: Male</dd>
<dd>Height: 7-9 inches</dd>
<dd>Weight: 14-18 lbs</dd>
<dd>Age: 3-4 Years old</dd>
<dd>Activity Level: Low - Medium</dd>
</dl>
<p>
Meet Jack Jack! He isn't exactly an Aussie pup, but he is a cute guy nonetheless. Jack <br>
loves to chill out and sit on someones lap even more than his brother Odyn. Don't let <br>
that fool you though, when Jack wants to play, he plays! Jack Jack, loves to wrestle <br>
with his cat friend Meep. Sometimes he wins, sometimes Meep wins, its a never ending battle!
</p>
</div>
</main>
<footer>© 20 R Us</footer>
</body>
回答 2
Stack Overflow用户
发布于 2021-02-11 11:03:28
我建议将文本内容、代码的DL和P标记部分包装在一个div中，给它一个info类来控制填充。然后将newdog ID更改为一个类，并且使用display: flex;将不需要浮动图像元素。自然，dl将放在p标记的上方。我也建议在你的css中重置你的填充和边距。这样你就不会追逐任何隐藏的浏览器填充或边际问题。最后，我建议删除P标记中的BR标记，除非您希望在那里有分隔符，否则这将让view port为您完成这项工作。
ID上的注释...Id属性对于单个元素应该始终是唯一的。如果你想对多个元素有一个通用的样式，可以使用一个类。因此我把newdog id改成了一个类。
此外，对于不同大小的屏幕，您可能也希望在CSS中考虑@media查询，以使您的图像和文本内容以更友好的格式适合较小的屏幕。这样，在全屏模式下查看此代码片段=)
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: rgb(255, 222, 176);
}
.newDog {
display: flex;
background-color: antiquewhite;
}
.info {
padding-left: 2rem;
}
.newDog dl {
font-family: 'Montserrat', sans-serif;
position: relative;
margin: 5em 0 2em;
}
.newDog p {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
position: inherit;
vertical-align: baseline;
}<body>
<header>
<img src="https://i.imgur.com/zb8Wvk3.png" alt="Aussies R Us" title="Aussies R Us">
<h1>⚞ Our Aussies ⚟</h1>
</header>
<nav>
<a href="index.html">Home</a> ┃
<a href="ouraussies.html">Our Aussies</a> ┃
<a href="faq.html">FAQ</a> ┃
<a href="contactus.html">Contact Us</a> ┃
</nav>
<main>
<div class="newDog">
<img src="https://i.imgur.com/R3yolM8.jpg" width="500" height="500" alt="Max" title="Max">
<div class="info">
<dl>
<dd>Name: Max</dd>
<dd>Availablility: Not Available</dd>
<dd>Breed: Standard Australian Shepherd</dd>
<dd>Gender: Male</dd>
<dd>Height: 20-25 inches</dd>
<dd>Weight: 50-60 lbs</dd>
<dd>Age: 1-2 Years old</dd>
<dd>Activity Level: Medium - High</dd>
</dl>
<p>
Meet Max! He is a great young Australian Shepherd, he is a very smart dog, and learns quickly. Max loves to be around people, even though he is not a very good lap dog, he never wants to be left out of the fun, and will stick around wherever there is people. Max loves other animals, small and big. He is very gentle when being introduced to other animals, and tends to watch after his smaller brothers.
</p>
</div>
</div>
<br>
<div class="newDog">
<img src="https://i.imgur.com/o2KAyxp.jpg" width="500" height="500" alt="Odyn" title="Odyn">
<div class="info">
<dl>
<dd>Name: Odyn</dd>
<dd>Availablility: Not Available</dd>
<dd>Breed: Mini Australian Shepherd</dd>
<dd>Gender: Male</dd>
<dd>Height: 14-18 inches</dd>
<dd>Weight: 15-25 lbs</dd>
<dd>Age: 4-5 Months old</dd>
<dd>Activity Level: Low - Medium</dd>
</dl>
<p>
Meet Odyn! He is a young pup that is looking to find a good lap to lay on and sleep! Odyn loves to play with his brothers Max and Jack Jack, but he also loves a good nap. If you are looking for a pup to laydown and watch a show with, Odyn is the pup for you!
</p>
</div>
</div>
<br>
<div class="newDog">
<img src="https://i.imgur.com/MDBBTWy.jpg" width="500" height="500" alt="Jack Jack" title="Jack Jack">
<div class="info">
<dl>
<dd>Name: Jack Jack</dd>
<dd>Availablility: Not Available</dd>
<dd>Breed: Yorkie</dd>
<dd>Gender: Male</dd>
<dd>Height: 7-9 inches</dd>
<dd>Weight: 14-18 lbs</dd>
<dd>Age: 3-4 Years old</dd>
<dd>Activity Level: Low - Medium</dd>
</dl>
<p>
Meet Jack Jack! He isn't exactly an Aussie pup, but he is a cute guy nonetheless. Jack loves to chill out and sit on someones lap even more than his brother Odyn. Don't let that fool you though, when Jack wants to play, he plays! Jack, loves to wrestle with his cat friend Meep. Sometimes he wins, sometimes Meep wins, its a never ending battle!
</p>
</div>
</div>
</main>
<footer>© 2021 Aussies R Us</footer>
</body>
Stack Overflow用户
发布于 2021-02-11 18:49:13
请将所有的p标记放在dl标记中，这样它就可以按照您的要求提供了
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66147784
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号