Question

我有一个div（RView）里面有其他div内容但不像我的其他div当页面宽度缩小时内容不会重新形成它弹出div。这是为什么？，我想要图片左侧的文字＆amp;所有人都像现在一样坚持但不会突然出现。这也是我第一次尝试建立一个网站，所以我知道它不是完美的，但我还在学习。

body {
  margin: 0px;
}

.RView {
    width: 100%;
    background-color: #BEBFBE;
    justify-content: center;
    display: flex;
}

.RView div {
    display: flex;
}

.RView p {
    margin: 20px 0px 0px 20px;
    justify-content: center;
    width: 150px;
}

.ReVW {
    display: inherit;
    width: 105px;
    height: 100px;
    margin: 20px 0px 20px 80px;
}

<div class="RView">
    <div><a href="https://www.cnet.com/uk/reviews/"><img src="Img/CNet.png" class="ReVW" alt="CNet Review"></a><p>"Incredibly beautiful phone case for an affordable price" - CNet</p></div>
    <div><a href="https://www.amazon.co.uk/ref=nav_logo/262-3052852-5868165"><img src="Img/AMZN.png" class="ReVW" alt="Amazon Review"></a><p>"Definetly some new competition on the market for the phone case industry" - Amazon</p></div>
    <div><a href="http://www.techadvisor.co.uk/review/phone-cases/"><img src="Img/RV1.png" class="ReVW" alt="Bolt Review"></a><p>"Wide range of case designs for any phone, just amazing cases" - Bolt Reviews</p></div>
  </div>

Answer 1

您正在将flex容器内的列设置为flex，而不是flex列。

下面将它们设置为相等的宽度列，并应该停止内容溢出。

.RView div {
    flex:1;
}

这是更新后的css，用于显示文本内容旁边的图像，并重置边距。

.RView p {
    margin: 0;
    display: inline-block;
    width: 50%;
}

.ReVW {
   width: 50%;
   margin: 0;
}

为什么我的div里面的内容突然出现？

1 个答案: