如何修复我的段落元素文本在 flexbox 中未对齐
[英]How do I fix my paragraph element text not aligning in flexbox
问题描述
When using my flexbox I am unable to get the p elements within the "newDog" div .
使用我的 flexbox 时，我无法在 "newDog" div中获取p元素。 I want them all to line up on the left side so that I can uniformly move them underneath the dl contents.我希望它们全部排列在左侧，以便我可以将它们统一移动到 dl 内容下方。
Here is the code:这是代码：
@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 个解决方案
解决方案1
0 2021-02-11 03:03:27
I suggest wrapping your text content, the DL and P tag portion of your code in a div, give it a class of info to control padding.我建议将您的文本内容、代码的 DL 和 P 标记部分包装在一个 div 中，给它一个 class 的info来控制填充。 Then change newdog ID to a class and with display: flex;然后将 newdog ID 更改为 class 并display: flex; there will be no need to float the image element.将不需要浮动图像元素。 naturally, the dl will place above the p tag then.自然， dl将放置在p标签之上。 I also suggest a reset for your padding and margin in your css.我还建议重置 css 中的填充和边距。 This way your not chasing any hidden browser padding or margin issues.这样您就不会追逐任何隐藏的浏览器填充或边距问题。 Lastly, I suggest removing the BR tags in your P tag, unless you want the breaks to be there, this will let the view port do that work for you.最后，我建议删除 P 标记中的 BR 标记，除非您希望有中断，否则这将让视口为您完成这项工作。
Note on ID's... Id attribute should always be unique to one single element.关于 ID 的注意事项... Id 属性对于单个元素应该始终是唯一的。 If you want to have a common style for multiple elements, use a class.如果您想为多个元素使用通用样式，请使用 class。 Hence I changed the newdog id to a class .因此，我将newdog id更改为class 。
Also, you may want to consider @media queries in your CSS as well for different size screens to make your images and text content fit on smaller screens in a more user friendly format.此外，您可能需要考虑 CSS 中的 @media 查询以及不同尺寸的屏幕，以使您的图像和文本内容以更用户友好的格式适合较小的屏幕。 With that, view this snippit in full screen mode =)这样，以全屏模式查看此代码段 =)
@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>
解决方案2
0 2021-02-11 10:49:13
Please Wrap all the p tag inside the dl tag,So that it comes as per your requirement请将所有 p 标签包装在 dl 标签内，以便根据您的要求提供
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.