Question

我需要帮助解决我的浮动div的问题，因为它们目前在彼此之下并排并排。包含在另一个正确浮动的div中。 JSFIDDLE LINK：https://jsfiddle.net/bgu5orh7/5/

这是我的HTML摘要：

<body> 
    <div id="left"> ... </div>
    <div id="right"> 
    <div class="thumb"> ... </div>
    <div class="thumb"> ... </div>
    </div>
</body>

这是我的css：（在jsfiddle css第221行找到）

@media screen and (min-width: 1200px) {
#left{
    width:25%;
    padding:3% 5% 0% 5%;
    display:block;
    float:left;
}

#right{
    width:65%;
    display:block;
    float:left;
    padding:30px 0px 0px 0px;
}

.thumb{
    width:30%;
    float:left;
    padding:20px 2.5px 0px 0px;
    display:block;
}
}

Answer 1

只需将display:block;更改为display:inline-block;即可，一切正常。

#left{
    width:25%;
    padding:3% 5% 0% 5%;
    display:inline-block;
    float:left;
}

#right{
    width:65%;
    display:inline-block;
    float:left;
    padding:30px 0px 0px 0px;
}

.thumb{
    width:30%;
    float:left;
    padding:20px 2.5px 0px 0px;
    display:inline-block;
}

<body> 
    <div id="left"> ... </div>
    <div id="right">
    <div class="thumb"> ... </div>
    <div class="thumb"> ... </div>
    </div>
</body>

Answer 2

通过将css display - 属性更改为table-cell，可以轻松实现您想要实现的目标。

以下代码有效：

/* 4. large desktop view */
@media screen and (min-width: 1200px) {

#left{
    width:25%;
    padding:3% 5% 0% 5%;
    display:table-cell;
    float:left;
}

#right{
    width:65%;
    display:table-cell;
    float:left;
    padding:30px 0px 0px 0px;
}

.thumb{
    width:30%;
    float:left;
    padding-top:20px;
    display:block;
    box-sizing:border-box;
}

Answer 3

移动视图代码clear:both被带入干扰浮动的宽屏代码中。

.thumb{
  width:100%;
  display:block;
  position:relative;
  float:left;
  padding-top:20px;
  clear:both;
}

固定：

.thumb{
   width:100%;
   display:block;
   position:relative;
   float:left;
   padding-top:20px;

}

divs不是并排浮动的

3 个答案: