HTML CSS浮动和内联块问题 [英] HTML CSS floats and inline-block issues

问题描述

共有三个块，第一个和最后一个浮在左边，中间的一个显示在行内块中，并且都清除了。为什么我的中间方块快要结束了？这是我的代码。

There are three blocks, first and last one are floated left and the middle one is displayed inline-block and cleared both. Why my middle block is coming at the end? Here is my code.

.box {
  width: 200px;
  height: 200px;
  background: red;
}
.block {
  height: 200px;
  width: 200px;
  background: blue;
  display: inline-block;
  clear: both;
}
.box1 {
  float: left;
}
.box2 {
  float: left;
  background: green;
}

<div class="box box1">1st Block</div>
<div class="block">Middle Block</div>
<div class="box box2">Third block</div>

https://codepen.io/suraj_122/pen/EdZpag

推荐答案

所有浮动

如果您想让block元素位于中间

if you want the block element to be in middle

然后使此
.box1 {
float：left;}
.box2 {
float：right;}

，然后自动插入行元素将居中。

and then automatically the inline block element will come to center.

我建议您使所有元素都内联块本身，因为它们的宽度和高度都相同。这也是响应式设计的最佳方法。

i suggest you to make all the elements inline block itself as they are all same width and height.it is best way for responsive design also.

这篇关于HTML CSS浮动和内联块问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！