Question

我想在面板的中间添加一个元素。我正在使用float: right和float:left来划分面板。我这里没有使用bootstrap。

我使用clear: both;和margin: 0 auto;样式，但这对我不起作用。有没有可能的方法呢？我附上了我想要的样本图像。

任何帮助都非常感谢。谢谢，

Answer 1

试试这个可能对你有帮助。

您只需使用 宽度1/3 和 向左浮动 即可实现

和 text-align：center 是中心文字

基本结构

＆＃13;

.col{
width: 33.33%;
text-align: center;

}

.left{
  float: left;
  }

＆＃13;

<div class="col left">
something
</div>
<div class="col left">
something is here!!
</div>
<div class="col left">
something
</div>

＆＃13;

您的设计

＆＃13;

.col{
width: 32%;
height: 300px;
text-align: center;
margin-left: .5%;
margin-right: .5%;

}

.left{
  float: left;
  }

.black{
background-color: black;
color: white;
}

.red{
background-color: red;  
}

＆＃13;

<div class="col left black">
something
</div>
<div class="col left red">
something is here!!
</div>
<div class="col left black">
something
</div>

＆＃13;

Answer 2

在css中没有任何名为float:center的东西，你只需要向左或向右浮动，并且在树形结构中制作html代码非常重要。

这是工作codepen。代码如下。

<div class="container">
      <div class="row">
            <div class="col20 black">
                  Float : left.
            </div>
            <div class="col60 red">
                  Added Something here.
            </div>
            <div class="col20 black">
                  Float : Right.
            </div>
      </div>
</div>



*{
      box-sizing : border-box;
}
.container{
      width:800px;
      margin:0 auto;
}
.row{
      width:100%;
      text-align: center;
}
.row:after{
      clear:both;
      content:"";
      display:block;
}
.row:before{
      clear:both;
      content:"";
      display:block;
}
.col20{
      width:20%;
      float:left;
      height:200px;
}
.col60{
      width:60%;
      float:left;
      height:200px;
}
.black{
      background:#000;
      color:#fff;
}
.red{
      background:red;
      Color:#fff;
}

Answer 3

另一种选择是，如果它们占据了父级的全部宽度和高度，您可以使用Flexbox布局：

.parent { display: flex; flex-direction: row; } .parent > * { flex: 1 1 auto; /* Or you can specify specific widths. I would suggest one being 1 1 auto though. */ }

<div class="parent"> <div class="left"></div> <div class="middle"></></div> <div class="right"></></div> </div>

CSS：将元素添加到float的中间

3 个答案: