Question

当我在我的内部div中使用float时，他们向下推。我用过清楚：两个都没有用。该怎么办？？？使用绝对位置也是不可能的。我没有遇到浮动的这种问题：左或浮动：正确

css代码：

.product-list{
    min-height:10px;
    background-color:white;
    position:relative;
    top:35px;
    padding:3px;
    margin:0;
    background-color:red;
}

.product-list-div{
    padding:0px;
    min-height:40px;
    background-color:navy;

}

.product-image-div{
    width: 50px;
    background-color: black;
    height: 20px;
    position: relative;
    padding: 0;
    margin: 0;
    float: left;
}


.product-details-div{
    width:200px;
    background-color: lime;
    height: 10px;
    position: relative;
    padding: 0;
    margin: 0;
    float: left;
}

html代码：

<div class="product-list">
  <div class="product-list">
    <div class="product-list-div">
      <div class="product-image-div"></div>
      <div class="product-details-div"></div>
    </div>
</div>

Answer 1

从代码中删除额外的product-list div。并且还清除了浮动的div，我已将overflow: hidden添加到product-list-div

<div class="product-list">
    <div class="product-list-div">
      <div class="product-image-div"></div>
      <div class="product-details-div"></div>
    </div>
</div>

product-list{
    min-height:10px;
    background-color:white;
    position:relative;
    top:35px;
    padding:3px;
    margin:0;
    background-color:red;
}

.product-list-div{
    padding:0px;
    min-height:40px;
    background-color:navy;   
     overflow: hidden;
}

.product-image-div{
    width: 50px;
    background-color: black;
    height: 20px;
    position: relative;
    padding: 0;
    margin: 0;
    float: left;
}


.product-details-div{
    width:200px;
    background-color: lime;
    height: 10px;
    position: relative;
    padding: 0;
    margin: 0;
    float: left;
}

选中此Demo

当usw向左浮动时，divs向下推

1 个答案: