Question

情境： 我们有一个绝对的＆＃39; div包裹float:left元素。

使用%代替px会使float:left在此方案中无效。

JSFiddle

检查：div.main_button_box

Answer 1

float工作得很好，它是父元素变化的大小。

父元素从子元素中获取其大小。当您将子元素更改为使用百分比（父元素的百分比）时，在计算父元素的大小时，不能再包括该子元素。父项的宽度变为仅另一个子元素的宽度，第二个子元素浮动在第一个子元素下面，因为第一个子元素占据父元素的整个宽度。

Answer 2

这种情况正在发生，因为您没有为绿色div的父级div.body类分配任何宽度。我刚刚为div.body分配了100％而且工作正常。

 div.body {
position: absolute;
bottom: 10px;
left: 20px;
width:100%;

div.main_informations {
    float: left;
    background-color:#49b7e5;
    padding: 20px 45px;

    h1 {
        font-size: 34px;
        font-weight: 300;
        color: white;
    }
}

div.main_button_box {
    //
    // Following 'width: 50px', try to change 50px with 50%.
    // 
    width: 50%;
    height: 160px;
    position: relative;
    float: left;
    background-color: green;

    span {
        position: absolute;
        bottom: 10px;
    }
}
}

DEMO

＆＃39;％＆＃39;而不是＆＃39; px＆＃39;删除＆＃39;浮动＆＃39;影响

2 个答案: