2 yishuixs yishuixs 于 2016.01.26 18:35 提问

如下一段简单的HTML-CSS代码,为何加了overflow就能实现目的?

目的:HTML中两块div,右侧固定宽度200px,左边的填满剩下的宽度
要求:左侧的div宽度是随可视区宽度变化而变化的,不能用calc()和CSS预处理语言

HTML:

<div class="right"></div>
<div class="left"></div>

CSS:

 .left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f
}

如果div.left不加overflow:hidden,那么div.left就默认是与可视区等宽的,div.right浮在右上,但为何加了overflow:hidden,div.left反而能空出div.right的位置呢?

4个回答

u012815069
u012815069   2016.01.26 18:53

还有这种写法,真的是学习了

showbo
showbo   Ds   Rxr 2016.01.27 10:29
a8761087
a8761087   Rxr 2016.01.27 13:52

因为overflow:hidden 属性会隐藏超出的部分。不加时,.left div 是宽度100%,你加了时,.left div 宽度还是100%。不过由于右边有.right div,就会把遮住.right div的部分隐藏掉

Momeory
Momeory   2016.01.28 22:43

虽然隐藏了,不过那个位置还是被占据了

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!