控制Flexbox HTML CSS中内容的宽度

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (23)

我有一个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>

删除文章标记中的边距权限可以解决问题,但现在它们未正确对齐。

提问于
用户回答回答于

您必须注意,您已在文章上设置了保证金。

问题可能出在这里:

article{
    margin-right:20em;
}

这会让你的article20em远离你的右端display。只需删除margin并运行代码即可。

扫码关注云+社区

领取腾讯云代金券