我有两个相邻的 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%;
}
最佳答案
使用媒体查询将两个元素切换为低于特定屏幕宽度(在我的代码段中为 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>
关于html - 溢出时包装 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44886324/