CSS Textarea和Div并排

Question

I'm trying to get my textarea and div to be side by side and have the run button underneath but I'm not sure why it isn't working. 我试图让我的textarea和div并排放置，并且在下面有运行按钮，但是我不确定为什么它不起作用。

The output looks like this: 输出看起来像这样：

http://codeeplus.net/test.php http://codeeplus.net/test.php

CSS: 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: 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

I would use two div's one to wrap around your text area and one to wrap around your other div. 我将使用两个div来环绕您的文本区域，使用一个div来环绕您的另一个div。 This way you can just use float: left; 这样，您可以只使用float: left; to put them both side by side :) 将它们并排放置:)

Answer 2

You should use display: inline-block; 您应该使用display: inline-block; property here, on the elements you want to align in one line 属性，在您要对齐的元素上

div {
    display:inline-block;
}

Online Example 在线示例

The default value for div tags is display:block; div标签的默认值为display:block;

EDIT 1: 编辑1：

I have checked your page. 我已经检查过您的页面。 The div that you're trying to alight in is not aligning, because your parent div has width:50% and it's simply not fitting in there. 您尝试下移的div没有对齐，因为您的父div的width:50%并且根本不适合该区域。 Try changing it to, let's say widht:100% and see that it really works! 尝试将其更改为，例如widht:100% ，看看它确实有效！

EDIT 2: 编辑2：

Also remember, that if you use padding , as you apparently do on your page, it's affecting the actual (final) width of the element. 还要记住，如果您使用padding ，就像您在页面上所做的那样，它会影响元素的实际（最终）宽度。 For example, if you set the parent div 's width: 1200px and padding as padding:10px; 例如，如果您将父div的width: 1200px设置为width: 1200px ， 填充设置为padding:10px; , then the actual div's size will be 1160px , cutting 10px on each side. ，则实际div的大小将为1160px ， 1160px减少10px 。

Answer 3

your code seems have many problems :), I made some changes: 您的代码似乎有很多问题:)，我进行了一些更改：

remove float:left; 删除float:left; from div s 来自div s
set display:inline-block; 设置display:inline-block;
add clear:both tag before button 在button之前添加clear:both标签
remove width:50%; 去除width:50%; and height:50% form first div 和height:50%形态第一div

look at new HTML: 查看新的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 jsFiddle在这里

CSS Textarea和Div并排

问题描述

3 个解决方案

解决方案1
2 已采纳

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

EDIT 1: 编辑1：

EDIT 2: 编辑2：

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

CSS Textarea和Div并排

问题描述

3 个解决方案

解决方案1 2 已采纳

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

EDIT 1: 编辑1：

EDIT 2: 编辑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