html - 如何制作此布局，以便文本区域不会被推到下一行？

Question

我有一个非常简单的布局。它有一个图像和一个文本区域。我希望图像位于布局的左上角，文本区域位于图像的右侧，并与图像的顶部对齐。

相反，文本区域被推到一个新行。如何使文本区域与图像顶部对齐？

<div class="image"></div>
<textarea class="textarea"></textarea> 

.image {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 70px;
  border: 1px solid #000;
}

.textarea {
  height: 150px;

  margin-left: 60px;
  width: -moz-calc(100% - 60px);
  width: -webkit-calc(100% - 60px);
  width: -o-calc(100% - 60px);
  width: calc(100% - 60px);
}

Answer 1

问题是您没有考虑空格。当你制作一个内联元素或内联 block 时，它就像文本一样流动。换句话说，将表示元素之间的空白。您已经添加了一个 10px 的缓冲区，但是 10px 不足以为空白留出空间。您有两个选择:

1. 进一步减小文本区域的宽度。您可能需要稍微调整一下这个值，但最终，它会在同一条线上

2. 元素之间不留空格，即:

   <div class="image"></div><textarea class="textarea"></textarea>
   

另外，现在，它永远都不会工作，因为您已经向文本区域添加了一个等于您要减去的宽度的左边距。 margin+width 的总和必须容纳在一行中，否则它会中断到下一行。完全删除边距。

查看以下 jsfiddle:http://jsfiddle.net/7fzjadep/ .我所做的只是删除边距并从宽度中减去 100px 而不是 60px。不管其他人怎么说，文本区域也不一定是内联 block 。