HTML中的Alingment

Question

我有以下示例代码：

<div style= "border : solid 2px #bebdbf;
  margin: auto;
  margin-top: 400px;
  background : #ffffff;
  color : #000000;
  padding : 4px;
  width : 200px;
  height : 250px;
  overflow : auto;">

  <?php
     foreach ($prueba as $pruebas) {
     print_r("$pruebas <br>");
  }?>
</div>


<div style= "border : solid 2px #bebdbf;
 background : #ffffff;
 margin: auto;
 color : #000000;
 padding : 4px;
 width : 200px;
 height : 250px;
 overflow : auto;">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    6<br />
    7<br />
    8<br />
    9<br />
    10<br />
</div>

我明白了：

我想要的是两个div彼此相邻而不是一个在另一个顶部。

Answer 1

尝试将display: inline-block;添加到两个div的style属性中，如下所示。

<div style= "border : solid 2px #bebdbf;
  margin: auto;
  margin-top: 400px;
  background : #ffffff;
  color : #000000;
  padding : 4px;
  width : 200px;
  height : 250px;
  overflow : auto;
  display: inline-block;">

  <?php
     foreach ($prueba as $pruebas) {
     print_r("$pruebas <br>");
  }?>
</div>


<div style= "border : solid 2px #bebdbf;
 background : #ffffff;
 margin: auto;
 color : #000000;
 padding : 4px;
 width : 200px;
 height : 250px;
 overflow : auto;
 display: inline-block;">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    6<br />
    7<br />
    8<br />
    9<br />
    10<br />
</div>