一个css布局问题

Question

如下布局如何实现啊！谢谢大家

Answer 1

flex

justify-content: space-around

Answer 2

flex布局

Answer 3

flex 布局。https://jsfiddle.net/anthozoa...

Answer 4

flex 即为弹性布局。
　　任何一个容器都可以指定为flex布局。
　　　　.box{display:flex}
　　行内元素可以使用flex布局
　　　　.box{display: inline-flex}
　　webkit内核的浏览器必须加上-webkit 前缀。
　　　　.box{display:-webkit-flex; display:flex;}
　　注意：元素设置flex布局以后,子元素得float ,clear 和 vertical-align 属性将失效。
　　基本概念：
　　　　采用flex布局的元素称之为flex容器，它的所有子元素自动成为容器成员，称为flex
　　　　项目。
　　　　
　　　　这里还找到一个微信小程序开发的Flex布局。可以供你参考：http://www.php.cn/xiaochengxu...
　　　　

Answer 5

flex布局可以实现
阮一峰大神讲解的flex布局，我想你会有收获的http://www.ruanyifeng.com/blo...

Answer 6

不使用css3的属性也可以做到，效果链接：

<div class="wrapper">
  <span class="tag">关键词</span>
  <span class="tag">关键词</span>
  <span class="tag">关键词</span>
  <span class="tag">关键词关键词</span>
  <span class="tag">关键词</span>
  <span class="tag">关键词</span>
  <span class="tag">关键词</span>
  <span class="tag">关键词</span>
  <span class="tag">关键词</span>
</div>

.wrapper{
  width:300px;
  background-color:white;
  padding:10px;
  text-align:center;
}
.tag{
  display:inline-block;
  background-color:green;
  color:white;
  margin:5px;
  padding:5px 10px;
  border-radius:5px;
}

Answer 7

http://www.ruanyifeng.com/blo...希望对你有所帮助