Question

我有一个包含div的内部有3个盒子。我试图让它们在彼此相同的线上显示。

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

我知道这是一个常见的问题，并且已经在这里查看了我正在寻找的内容，但没有一个解决方案似乎按预期工作。

这是我的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>

Answer 1

您忘记将float规则放入div aboutbox2

试试这个小提琴，看看是否只有漂浮物是问题。 FIDDLE

Answer 2

你没有为.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;

}

Answer 3

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

表示每个相邻的div float: left (or right if you want to read right-to-left)
为每个定义width（我建议响应式设计的％宽度）
要分隔行，请将相邻的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>

这将清除浮动，以便下一个项目从新行开始。

Answer 4

我认为添加vertical-align属性可能会有所帮助

vertical-align: top;

div没有按预期浮动

4 个答案: