Question

我正在尝试让我的textarea和div并排，并在下方运行按钮，但我不确定它为什么不起作用。

输出如下：

CSS：

  .CodeMirror { height: 400px; width: 500px; border: 1px solid #ddd; }
  .CodeMirror-scroll { max-height: 400px; }
  .CodeMirror pre { padding-left: 7px; line-height: 1.25; }
  #drawing { border: 1px solid #555555; float:left; width:480px; height: 400px; }

HTML：

<div style="position: absolute; left: 10px; top: 10px; padding: 10px; width:50%; height: 50%; border: 1px solid #000000;">
<div style="float:left">
    <textarea align="left" style="overflow:auto;" id="demotext" name="textarea">
<html>
    <head>
        <title>Learning HTML</title>
    </head>
    <body>
        <p>I'm learning HTML! This is my first line of code!</p>
    </body>
</html></textarea>
</div>
<div style="float:left;">
<div id="drawing" style="text-align:left;padding:10px;"></div>
</div>
<input type="button" id="run" value="Run" />
</div>

Answer 1

我会使用两个div来环绕你的文本区域，一个用来包裹你的另一个div。这样你就可以使用float: left;将它们并排放在一起：）

Answer 2

您应该在此处使用display: inline-block;属性，对应要在一行中对齐的元素

div {
    display:inline-block;
}

Online Example

div 标记的默认值为display:block;

编辑1：

我检查了你的页面。您尝试下车的 div 没有对齐，因为您的父div有width:50%而且它根本不适合那里。尝试将其更改为，让我们说widht:100%，看看它确实有效！

编辑2：

还要记住，如果您使用 padding ，就像您在页面上显然那样，它会影响元素的实际（最终）宽度。例如，如果您将父 div 的width: 1200px和填充设置为padding:10px;，那么实际的 div 大小为1160px，每边都缩10px。

Answer 3

您的代码似乎有很多问题:)，我做了一些更改：

从float:left; s

div

设置display:inline-block;
在clear:both

button

首先从width:50%;

height:50%

div

查看新的HTML：

<div style="position: absolute; left: 10px; top: 10px; padding: 10px; border: 1px solid #000000;">
<div style="display:inline-block; vertical-align:top;">
    <textarea align="left" style="overflow:auto;" id="demotext" name="textarea">
    <head>
        <title>Learning HTML</title>
    </head>
    <body>
        <p>I'm learning HTML! This is my first line of code!</p>
    </body>
</textarea>
</div>
<div style="display:inline-block">
<div id="drawing" style="text-align:left;padding:10px;"></div>
</div>
    <div style="clear:both"></div>
<input type="button" id="run" value="Run" />
</div>

jsFiddle is here

CSS Textarea和Div并排

3 个答案:

编辑1：

编辑2：