如何将div放在内联块div中？

Question

我正在尝试做这样的事情：

但是当我在红色div中添加div时，绿色div向下移动

这是我的代码：

<div style="width:25vw; background-color:red;height:200px;display:inline-block">
         <div style="vertical-align: top">this is the first child div</div>
         <div style="vertical-align: top">this is the second child div</div>
    </div>
     <div style="width:25vw; background-color:green;height:200px;display:inline-block">
        inside div
    </div>

Answer 1

将vertical-align:top;添加到您的绿色div。红色div你不需要它。

这与其他div中文本的行框有关，这些行更改了文本的基线。老实说，我现在不记得细节，但这是很常见的事情。

创建div之间的差距是因为您的元素是内联的，就像文本一样，因此为您创建了“单词之间”的空格。为了摆脱空间，div之间没有任何空间。那就是：

<div>words</div>< div>more words</div>

或

<div>words</div><div> more words </div>

请注意，结束div标签与第二个div标签的开口之间没有空格。

Answer 2

我认为此代码可行。

＆＃13;

＆＃13;

table td {
  text-align:center;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding:0 15px
}
table {
  background: linear-gradient(to right, #ff0100 50%, #008004 51%)
}

＆＃13;

<table class="">
  <tbody>
    <tr>
      <td colspan="2">div</td>
      <td>div</td>
      <td>div</td>
    </tr>
    <tr>
      <td>div</td>
      <td>div</td>
      <td colspan="2">div</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以将float: left添加到第一个div，它将正确对齐。