html - CSS:将元素添加到 float 中间

Question

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

我使用了 clear: both; 和 margin: 0 auto; 样式，但它对我不起作用。有什么办法可以做到吗？我附上了我想要的示例图像。

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

Answer 1

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

你可以简单地使用 width 1/3 和 float left 来实现

和text-align: center是让文本居中

基本结构

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

}

.left{
  float: left;
  }

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

您的设计

.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;  
}

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