控制Flexbox HTML CSS中的内容宽度
控制Flexbox HTML CSS中的内容宽度
提问于 2019-05-28 01:52:00
我有一个flexbox，里面有图像和文本。由于某些原因，flexbox中有一大块区域我无法放置内容。这就像是padding在那里，它不会让它过去。我不太确定为什么内容不能放在这个区域。
用黄色突出显示的部分是我不能放置任何东西的地方。如果它越过这个区域，它就会转到下一行。
我想让它延伸，因为现在，文本看起来太近了。我如何才能做到这一点？
/*Header for picture, and description*/
#display {
padding-top: 2em;
border: solid .125em black;
display: flex;
flex-flow: wrap;
background-color: white;
opacity: 0.9;
}
#display > * {
flex: 1 1 5%;
padding: 1em;
}
article{
margin-right:20em;
}
article h1{
font-size: 2em;
text-align: center;
}
article p{
padding-top: 2em;
} <section id="display">
<figure id="headshot">
<img src="images/GM05.png" alt="headshot"/>
</figure>
<article>
<h1>Name Goes Here</h1>
<p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
</article>
</section>删除文章标签中的右边距可以解决这个问题，但现在它们不能正确对齐。
回答 1
Stack Overflow用户
发布于 2019-05-28 02:02:20
你必须注意到你在文章上加了页边距。
问题可能出在这里：
article{
margin-right:20em;
}这会使您的article 20em远离display的右端。只需删除margin并运行代码即可。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56330495
复制相关文章
相似问题