0

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

输出如下所示：

http://codeeplus.net/test.php

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>
4

3 回答 3

3

I would use two div's one to wrap around your text area and one to wrap around your other div. This way you can just use float: left; to put them both side by side :)

于 2013-11-03T18:38:01.887 回答
1

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

  • float:left;从divs中删除
  • 放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 在这里

于 2013-11-03T18:53:53.307 回答
1

你应该display: inline-block;在这里使用属性，在你想在一行中对齐的元素上：

div {
    display:inline-block;
}

在线示例

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

编辑1：

我检查了你的页面。div您尝试对齐的不是对齐，因为您的父 div 有并且width:50%它根本不适合那里。尝试将其更改为，假设width:100%它确实有效！

编辑2：

还要记住，如果你使用padding，就像你在页面上所做的那样，它会影响width元素的实际（最终）。例如，如果您将父div和padding设置为width: 1200px，那么实际div 的大小将是，每边切割。padding:10px;1160px10px

于 2013-11-03T18:43:31.883 回答