CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 如何在浮动定义的情况下阻止s相互移动?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
非常简单的CSS问题,到目前为止我还没有找到答案:

我试图在一行中放置一个两个div并排的页面(使用float:left;和float:right;),然后在它们下面放一个div.问题是如果顶行(定义为div本身)太宽以至于两个div之间的空间可以容纳底部div,则底部div向上移动到顶行,创建一行三个div的外观.我不知道这是否清楚,但这是代码:

<div id="top div" style="width:400px;">
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div>
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div>
</div>

<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

因此,如上所述,由于顶部div在其左右子元素之间具有200px的间隙,因此底部div中的图像在它们之间向上滑动.如果我使顶部div的宽度399px不会发生.我尝试使用CSS“清除”属性,但这并没有解决问题.我总是以一种草率的方式绕过这个看似奇怪的行为,但想找到一个更好的做法.

任何帮助或方向非常感谢!

解决方法

在第一个div上使用overflow:auto
<div id="top div" style="width:400px;overflow:auto;">
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div>
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div>
</div>

<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

它会导致容器div扩展到其子容器的内容,因此以下div将保持其位置.

大佬总结

以上是大佬教程为你收集整理的css – 如何在浮动定义的情况下阻止s相互移动?全部内容,希望文章能够帮你解决css – 如何在浮动定义的情况下阻止s相互移动?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。