在同一行显示div标签

Question

我想在同一行显示div标签。现在在同一行显示空div。我在php中有内容，因此循环显示变化。 客户端框显示在工资单div下方。Fiddle

＆＃13;

＆＃13;

.pay{
  width:35%;
  height:450px;
  border: 1px solid black;
    display: inline-block;
  margin-left:2%;  
}

.inner{
 position:relative;
   height:23px;
    background: #C0C0C0;
   text-align:center;
   font-size:13px;
   color:#fff;
    padding: 10px;
}

＆＃13;

<div>
     <div class="pay 1">
                       <div class="inner">
                           <h3>Payroll Documents</h3>
                           
                       </div>
     <a>hello </a><br>
     <a>hello </a><br>
     <a>hello </a><br>
                    </div>
		    <div class="pay 2">
                       <div class="inner">
                           <h3>Clients Documents</h3>
                       </div>
                      <a>hello </a>
     
                    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

添加vertical-align：top;在你的CSS'pay'类属性中。

.pay{
  width:35%;
  height:450px;
  border: 1px solid black;
  display: inline-block;
  margin-left:2%;  
  vertical-align: top;
}

Answer 2

我没有使用display:inline-block;，而是添加了float:left来获得所需的结果。

同样在div的末尾添加<div style="clear: both"></div>以清除float

更新了小提琴here

.pay{
  width:35%;
  height:450px;
  border: 1px solid black;
  float: left;
  margin-left:2%;  
}

.inner{
 position:relative;
   height:23px;
    background: #C0C0C0;
   text-align:center;
   font-size:13px;
   color:#fff;
    padding: 10px;
}

<div>
     <div class="pay 1">
                       <div class="inner">
                           <h3>Payroll Documents</h3>
                           
                       </div>
     <a>hello </a><br>
     <a>hello </a><br>
     <a>hello </a><br>
                    </div>
		    <div class="pay 2">
                       <div class="inner">
                           <h3>Clients Documents</h3>
                       </div>
                      <a>hello </a>
     
                    </div>
  <div style="clear: both"></div>
</div>

Answer 3

Now the two divs are positioned in same link, check this fiddle
http://jsfiddle.net/stanze/ps8nda6n/3/

Answer 4

您需要在pay类中添加一个额外的css属性（float：left;）。 您的薪资等级现在变为如下

.pay{
  width:35%;
  height:450px;
  border: 1px solid black;
  display: inline-block;
  margin-left:2%;  
  float: left;
}