CSS Textarea和Div並排
[英]CSS Textarea and Div side by side
問題描述
我試圖讓我的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>
3 個解決方案
解決方案1
2 已采納
我將使用兩個div來環繞您的文本區域，使用一個div來環繞您的另一個div。 這樣，您可以只使用float: left; 將它們並排放置:)
解決方案2
1 2013-11-03 18:43:31
您應該使用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 。
解決方案3
1 2013-11-03 18:53:53
您的代碼似乎有很多問題:)，我進行了一些更改：
- 刪除
float:left;來自divs - 設置
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>
將div與CSS並排放置
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.