img父盒子未设置宽度,浮动后不占宽度

2016-09-05  本文已影响0人  liujunyan

对以下结构:

<div class="fl">
  <img src="https://img.haomeiwen.com/i1487291/3ed84327037e3d2a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/480/q/100" alt="">
</div>
<div class="nor">123</div>

设置样式:

.fl {
  float: left;
  height: 20px;
  width: 10px;
  padding: 10px 10px;
  margin: 10px 10px;
}

其中,fl的div未设置宽度,此时会发现nor的div的宽度占满一行,就像fl的div不占有宽度一样,即使其已经设置了内、外边距,横向边距也不会影响到第二个div占满一行。
但是只要给第一个div手动设置了width,其宽度和边距就会生效,并影响到第二个div的显示。

上一篇 下一篇

猜你喜欢

热点阅读