Question

您好我使用CSS来定位我的div框，这是我的结果：

-------
 div  i
 box1 i
-------
        ----------
        i  div   i
        i  box2  i
        ----------
                   -------
                   i  div
                   i  box3
                   -------

我很抱歉我无法上传图片因为我的声望点仅为2，好吧让我们继续，我得到的结果是将每个div框打破到新行，但我不想像那个，我想要的结果是将3个div框对齐到相同的水平线，如下所示：

------  ---------  ------
     i  i       i  i
     i  i       i  i
------  ---------  ------

这是我的CSS代码，有人可以纠正我的错误吗？

#divbox1{
    display: flex;
    height: auto;
    width: 40%;
    margin-top: 5%;
    margin-left: -25%;
    position: relative;
    border-style: solid;
    border-color: #888888;
}
#divbox2{
    display: flex;
    height: auto;
    width: 60%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    border-style: solid;
    border-color: #888888;
}
#divbox3{
    display: flex;
    height: auto;
    width: 40%;
    margin-top: 5%;
    margin-left: 85%;
    position: relative;
    border-style: solid;
    border-color: #888888;
}

添加点：我想显示divbox1和3的20％显示，这就是为什么即时使用 - ％margin

Answer 1

#divbox1{
    float:left;
    height: 50px;
    width: 10%;
    position: relative;
    border-style: solid;
    border-color: #888888;
}
#divbox2{
    float:left;
    height: 50px;
    width: 50%;
    position: relative;
    border-style: solid;
    border-color: #888888;
}
#divbox3{
    float:left;
    height: 50px;
    width: 20%;
    position: relative;
    border-style: solid;
    border-color: #888888;
}

<div id='divbox1'></div>
<div id='divbox2'></div>
<div id='divbox3'></div>

不要使用

display:flex;

而只是去

float:left;

在每个方框中。和宽度一起玩，你可能需要稍微减少一些值。并摆脱这些利润。

Answer 2

您使用display:flex;错误。它需要应用于父容器才能按照您期望的方式工作。你需要添加一个额外的div来包围整个事情：

<div id="group">
  <div id="divbox1"></div>
  <div id="divbox2"></div>
  <div id="divbox3"></div>
</div>

完成此操作后，您需要从内部div中删除display:flex;。并将其添加到分组div。生成的CSS应如下所示：

#group{
display:flex;
width:100%;
}

#divbox1{
flex:4;
margin-top: 5%;
margin-left: -25%;
position: relative;
border-style: solid;
border-color: #888888;
}

#divbox2{
flex:6;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
position: relative;
border-style: solid;
border-color: #888888;
}

#divbox3{
flex:4;
margin-top: 5%;
margin-left: 85%;
position: relative;
border-style: solid;
border-color: #888888;
}

将flex:4;或flex:6;添加到每个内部div基本上是告诉flexbox你希望你的div相对于彼此的大小。然后，默认情况下，flexbox会使它们适合屏幕的宽度，除非你的div上有min-width之类的内容。

希望我能帮到你。欢呼声。

Answer 3

这是你在找......？

    .container {
      width: 960px; /* define your container width */
    }

    .box {
      width: 30%; /* whatever width */
      height: 200px; /* whatever height */
      background: #ccc;
      margin: 30px 1%;
      float: left;
    }

<div class="container">
    <div class="box box1">
      <!-- your content goes here -->
    </div>
    <div class="box box2">
      <!-- your content goes here -->
    </div>
    <div class="box box3">
      <!-- your content goes here -->
    </div>
</div>

CSS div在同一行中对齐水平

3 个答案: