Question

我希望使用下面的代码显示2 div显示内联块

＆＃13;

.imgcss {
	height:300px;
	width:200px;
	background-color:#CCC;
	display:inline-block}
.tablecss {
	display:inline-block;}

＆＃13;

<div class="container">
	<div class="imgcss">
    
    </div>
    <div class="tablecss">
    <table width="auto" border="1">
  <tr>
    <td>USER1</td>
    <td>2000</td>
  </tr>
  <tr>
    <td>USER2</td>
    <td>2005</td>
  </tr>
  <tr>
    <td>USER3</td>
    <td>2010</td>
  </tr>
</table>

    </div>
</div>

＆＃13;

但它并不像我想要的那样表现出来。你可以看到这张照片

http://i.stack.imgur.com/IPayZ.jpg

我希望它显示如下：

http://i.stack.imgur.com/FyKDl.jpg

怎么做？谢谢你

Answer 1

将vertical-align: top添加到.tablecss。 inline-block默认情况下将对象设置为baseline：

.imgcss {
  height:300px;
  width:200px;
  background-color:#CCC;
  display:inline-block
}

.tablecss {
  display:inline-block;
  vertical-align:top; <----
}

FIDDLE

Answer 2

＆＃13;

.imgcss {
  height: 300px;
  width: 200px;
  background-color: #CCC;
  display: inline-block;
  vertical-align: top; /* <-- add this */
}
.tablecss {
  display: inline-block;
}

＆＃13;

<div class="container">
  <div class="imgcss">

  </div>
  <div class="tablecss">
    <table width="auto" border="1">
      <tr>
        <td>USER1</td>
        <td>2000</td>
      </tr>
      <tr>
        <td>USER2</td>
        <td>2005</td>
      </tr>
      <tr>
        <td>USER3</td>
        <td>2010</td>
      </tr>
    </table>

  </div>
</div>

＆＃13;

Answer 3

试试这个

.tablecss {
    display:inline-block;
    vertical-align: top;
}

Answer 4

只需将vertical-align:top添加到您的班级.tablecss

<强> CSS .tablecss { 显示：内联块; 垂直对齐：顶部; }

Div位置内联块

4 个答案: