html - 溢出时包装 div

Question

我有两个相邻的 div。右侧的 div 包含图像，左侧的 div 包含文本。当浏览器窗口变小时，我正在尝试弄清楚如何让右侧的 div 在开始覆盖图像时移动到图像下方。

下面是 HTML 和 css。我应该如何调整CSS？感谢您的帮助。

HTML:

        <div class="divcontainer">

            <div class="leftdiv"><img src="images.jpg" alt="image"></div> 

            <div class="rightdiv">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Hic quoque suus est de summoque bono dissentiens dici vere 
            Peripateticus non potest. Duo Reges: constructio interrete. 
            Haec para/doca illi, nos admirabilia dicamus. Sed quanta sit 
            alias, nunc tantum pos
            </p>
            </div>

        </div>

CSS:

        .divcontainer{  
        }

        .leftdiv{   
            float:left;
            width: 20%;
            margin: 1%;
            padding: 1%;        
        }

        .rightdiv{
            float:left;
            width: 70%;
            margin: 1%;
            padding: 1%;    
        }

Answer 1

使用媒体查询将两个元素切换为低于特定屏幕宽度(在我的代码段中为 500 像素)的 100% 宽度:

(请注意，我还为图像本身设置了一个规则以填充其容器宽度，除非它变得比原始宽度更宽 - 在我的示例中为 350 像素)

  .divcontainer {
  padding: 10px;
}

.leftdiv {
  float: left;
  width: 20%;
  margin: 1%;
  padding: 1%;
}

.leftdiv img {
  width: 100%;
  max-width: 350px;
}

.rightdiv {
  float: left;
  width: 70%;
  margin: 1%;
  padding: 1%;
}

@media screen and (max-width: 500px) {
  .leftdiv,
  .rightdiv {
    width: 100%;
  }

<div class="divcontainer">

  <div class="leftdiv"><img src="http://placehold.it/350x240" alt="image"></div>

  <div class="rightdiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Duo Reges: constructio interrete. Haec para/doca illi, nos admirabilia dicamus. Sed quanta sit alias, nunc
      tantum pos
    </p>
  </div>

</div>