CSS Textarea和Div并排

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来环绕您的另一个div。 这样，您可以只使用float: left; 将它们并排放置:)

Answer 2

您应该使用display: inline-block; 属性，在您要对齐的元素上

div {
    display:inline-block;
}

在线示例

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

编辑1：

我已经检查过您的页面。 您尝试下移的div没有对齐，因为您的父div的width:50%并且根本不适合该区域。 尝试将其更改为，例如widht:100% ，看看它确实有效！

编辑2：

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

Answer 3

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

删除float:left; 来自div s
设置display:inline-block;
在button之前添加clear:both标签
去除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在这里

CSS Textarea和Div并排

问题描述

3 个解决方案

解决方案1
2 已采纳

解决方案2
1 2013-11-03 18:43:31

编辑1：

编辑2：

解决方案3
1 2013-11-03 18:53:53

CSS Textarea和Div并排

问题描述

3 个解决方案

解决方案1 2 已采纳

解决方案2 1 2013-11-03 18:43:31

编辑1：

编辑2：

解决方案3 1 2013-11-03 18:53:53

解决方案1
2 已采纳

解决方案2
1 2013-11-03 18:43:31

解决方案3
1 2013-11-03 18:53:53