如何将2个div元素组合在一起？

Question

我有2列数字，我希望它们并排显示。它在我尝试使用float: left时有效但我希望它们出现在中心。如果没有float，它们会出现一行，然后是下一行。

＆＃13;

＆＃13;

body {
  color: #fff;
  text-align: center;
}

#roll, #roll2, #roll3, #roll4 {
  width: 40px;
  height: 360px;
  background: #0077ee;
  margin: 0 auto;
  
}

.roll-h {
  width: 40px;
  height: 120px;
  margin: 0 auto;
  overflow: hidden;
}

.shadow {
  height: 40px;
  margin: 0 auto;
  transform: translateY(40px);
}

.black,
.his-h {
  width: 40px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  font-weight: 700;
  text-align: center;
  float: left;
}

.black {
  background: black;
}



.floatleft { 

float: left;

}

＆＃13;

<div class="floatleft">	
	
<div class="shadow"></div>
<div class="roll-h">
  <div id="roll3">
    <div class="black">9</div>
    <div class="black">0</div>
    <div class="black">1</div>
    <div class="black">2</div>
    <div class="black">3</div>
    <div class="black">4</div>
    <div class="black">5</div>
    <div class="black">6</div>
    <div class="black">7</div>
    <div class="black">8</div>
    <div class="black">9</div> 
    <div class="black">0</div>

  </div>
</div>
</div>
<div class="floatleft">	
	
<div class="shadow"></div>
<div class="roll-h">
  <div id="roll4">
    <div class="black">9</div> 
    <div class="black">0</div>
    <div class="black">1</div>
    <div class="black">2</div>
    <div class="black">3</div>
    <div class="black">4</div>
    <div class="black">5</div>
    <div class="black">6</div>
    <div class="black">7</div>
    <div class="black">8</div>
    <div class="black">9</div> 
    <div class="black">0</div>
    
  </div>
</div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用inline-block这样

并排查看物品

.floatleft {
    display: inline-block;
} 

Answer 2

您必须使用以下样式在所有html周围添加父（容器）div：

<div style="margin:0 auto; display:inline-block">

在此处查看：

＆＃13;

＆＃13;

body {
  color: #fff;
  text-align: center;
}

#roll, #roll2, #roll3, #roll4 {
  width: 40px;
  height: 360px;
  background: #0077ee;
  margin: 0 auto;
  
}

.roll-h {
  width: 40px;
  height: 120px;
  margin: 0 auto;
  overflow: hidden;
}

.shadow {
  height: 40px;
  margin: 0 auto;
  transform: translateY(40px);
}

.black,
.his-h {
  width: 40px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  font-weight: 700;
  text-align: center;
  float: left;
}

.black {
  background: black;
}



.floatleft { 
  float: left;
}

.container {
  display:inline-block;
  margin:0 auto;
}

＆＃13;

<div class="container">

  <div class="floatleft">

    <div class="shadow"></div>

    <div class="roll-h">
      <div id="roll3">
        <div class="black">9</div>
        <div class="black">0</div>
        <div class="black">1</div>
        <div class="black">2</div>
        <div class="black">3</div>
        <div class="black">4</div>
        <div class="black">5</div>
        <div class="black">6</div>
        <div class="black">7</div>
        <div class="black">8</div>
        <div class="black">9</div>
        <div class="black">0</div>

      </div>
    </div>
  </div>


  <div class="floatleft">

    <div class="shadow"></div>
    <div class="roll-h">
      <div id="roll4">
        <div class="black">9</div>
        <div class="black">0</div>
        <div class="black">1</div>
        <div class="black">2</div>
        <div class="black">3</div>
        <div class="black">4</div>
        <div class="black">5</div>
        <div class="black">6</div>
        <div class="black">7</div>
        <div class="black">8</div>
        <div class="black">9</div>
        <div class="black">0</div>

      </div>
    </div>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;