divs不像预期的那样浮动

我有一个包含3格内的div。我试图让他们显示在相同的线上。divs不像预期的那样浮动

我已经使用浮动来尝试实现这一点，但他们似乎搞砸了。

我知道这是一个常见问题，并已通过此处查找找到我正在寻找的内容，但没有一个解决方案似乎按预期工作。

这里是我的JSFiddle

<div class="aboutcol1"> 

    <div class="aboutbox1"> 
    <div id="aboutbox-image1"> 
    </div> 
    </div> 


    <div class="aboutbox2"> 
    <div id="aboutbox-image2"> 
    </div> 
    </div> 

    <div class="aboutbox3"> 
    <div id="aboutbox-image3"> 
    </div> 
    </div> 

</div>

来源

2015-10-02 DPMC87

''.aboutbox2'不是浮动的，所以它只是一个普通的显示块div – zgood

建议：你有一些重复的css，并且可以通过创建一个图像共享的类来清除它。看看这个更新[小提琴]（http://jsfiddle.net/0L141puq/） – cocoa

你已经忘记把浮动规则与类aboutbox2

到的div试试这个小提琴，看看是否只将浴液的问题。 FIDDLE

来源

2015-10-02 20:34:41 Chris

非常简单，谢谢你。认为我盯着它太长时间:(会接受当它让我的！ – DPMC87

作为建议：不要使用ID。在你的情况下，你可以使用儿童选择器'>'做这项工作。样式得到很多ids的混乱 – Chris

工作像一个魅力谢谢你，我会记住干杯！ – DPMC87

你没有把浮动留给.aboutbox2类

更新CSS

.aboutboxes1 { 
    min-width:100%; 
    max-width:100%; 
    width: 100%; 
}  

.aboutbox1{ 
    max-width:20%; 
    width:20%; 
    min-width:20%; 
    height:10vw; 
    float:left; 
} 


#aboutbox-image1 { 
    background-image: url('http://placehold.it/350x150'); 
    background-position: left top; 
    background-size: 100%; 
    background-repeat:no-repeat; 
    cursor: pointer; 
    margin-left:auto; 
    margin-right:auto; 
    height: 100%; 
    border-radius: 1.8vw; 
    border: hidden; 
} 

.aboutbox2{ 
    max-width:20%; 
    min-width:20%; 
    height:10vw; 
    width:20%; 
    float:left; 
} 

#aboutbox-image2 { 

    background-image: url('http://placehold.it/350x150'); 
    background-position: left top; 
    background-size: 100%; 
    background-repeat:no-repeat; 
    cursor: pointer; 
    margin-left:auto; 
    margin-right:auto; 
    height: 100%; 
    border-radius: 1.8vw; 
    border: 25px solid #000000; 

} 
.aboutbox3{ 
    max-width:20%; 
    min-width:20%; 
    height:10vw; 
    float:left; 
width:20%; 
} 


#aboutbox-image3 { 

    background-image: url('http://placehold.it/350x150'); 
    background-position: left top; 
    background-size: 100%; 
    background-repeat:no-repeat; 
    cursor: pointer; 
    margin-left:auto; 
    margin-right:auto; 
    height: 100%; 
    border-radius: 1.8vw; 
    border: hidden; 

}

来源

2015-10-02 20:42:06

我认为加上vertical-align属性可能有助于

vertical-align: top;

来源

2015-10-02 20:53:46

如何在浮动相邻的div一条线：

对于每个相邻的div float: left (or right if you want to read right-to-left)
定义每个一个width（I推荐％宽度响应设计）
为了分离行，包住另一个DIV中的相邻的div和clear: both重置浮动。

.aboutbox { 
 
    width: 20%; 
 
    float:left; 
 
} 
 
.aboutbox-image { 
 
    height:10vw; 
 
    background-image: url('http://placehold.it/350x150'); 
 
    background-size: cover; 
 
    cursor: pointer; 
 
    border-radius: 1.8vw; 
 
} 
 
.bordered { 
 
    border: 25px solid #000000; 
 
}

<div class="aboutbox"> 
 
    <div class="aboutbox-image">box1</div> 
 
</div> 
 
<div class="aboutbox"> 
 
    <div class="aboutbox-image bordered">box2</div> 
 
</div> 
 
<div class="aboutbox"> 
 
    <div class="aboutbox-image">box3</div> 
 
</div>

所以下一个项目开始于一个新的行会清除浮动。

来源

2015-10-02 21:03:13

**注意**我删除了一些冗余在你的CSS。不知道你要去什么，所以我猜：） –

divs不像预期的那样浮动

回答

相关问题