同一行中不止一个div

Question

我想在同一行开发三个div，如下所示：

请帮帮我

Answer 1

你有很多方法可以做到这一点 - 我想与你分享这个。看看这是否对你有帮助。

1. 表格布局：

body{
  margin: 0;
}
* {
  box-sizing: border-box  
}
.wrapper {
  display: table;
  height: 100%;
  width: 100%;
  border-collapse: collapse;
 }
.wrapper .row {
  display: table-row;  
}
.wrapper .row div {
  display: table-cell;
  border: 1px solid white;
  background: #ddd;
  color: red;
  text-align: center;
  height: 100px;
  vertical-align: middle;
}

<div class="wrapper">
  <div class="row">
    <div>a</div>
    <div>b</div>
    <div>c</div>
  </div>
  <div class="row">
    <div>d</div>
    <div>e</div>
    <div>f</div>
  </div>
</div>

1. 使用Flexbox：

body{
  margin: 0;
}
* {
  box-sizing: border-box  
}
.wrapper {
  height: 100%;
  width: 100%;
 }
.wrapper .row {
  display: flex;
  flex-direction: row;
}
.wrapper .row div {
  flex: 1;
  border: 1px solid white;
  background: #ddd;
  color: red;
  text-align: center;
  height: 100px;
  display: inline-block;
  vertical-align: middle;
}
.wrapper .row div:before {
  content: '';  
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

<div class="wrapper">
  <div class="row">
    <div>a</div>
    <div>b</div>
    <div>c</div>
  </div>
  <div class="row">
    <div>d</div>
    <div>e</div>
    <div>f</div>
  </div>
</div>

1. 使用Float：

body{
  margin: 0;
}
* {
  box-sizing: border-box  
}
.wrapper {
  height: 100%;
  width: 100%;
 }
.wrapper .row {
  display: block;
}
.wrapper .row:after {
  content: '';
  display: block;
  clear: both;
}
.wrapper .row div {
  flex: 1;
  border: 1px solid white;
  background: #ddd;
  color: red;
  text-align: center;
  height: 100px;
  display: inline-block;
  vertical-align: middle;
  width: 33.33%;
  float:left;
}
.wrapper .row div:before {
  content: '';  
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

<div class="wrapper">
  <div class="row">
    <div>a</div>
    <div>b</div>
    <div>c</div>
  </div>
  <div class="row">
    <div>d</div>
    <div>e</div>
    <div>f</div>
  </div>
</div>

谢谢！

Answer 2

<div><div style="height:40px; width:40px; float:left;">content1</div><div style="height:40px; width:40px; float:left;">content2</div><div style="height:40px; width:40px; float:left;">content3</div><div style="height:40px; width:40px; float:left;">content4</div><div style="height:40px; width:40px; float:left;">content5</div><div style="height:40px; width:40px; float:left;">content6</div></div>