请帮助我使用CSS定位div [英] please help me out in positioning div's using css
问题描述
我刚刚在JavaScript中学习了DOM，并且正在使用JavaScript和CSS。
在这段代码中，我想知道是否有办法将子div并排放置而不是重叠。
< ;！doctype html>
< html>
< head>
< style type =text / css> < br $>
#parentdiv
{
margin-top：10px;
身高： 800px;
宽度：800px;
位置：相对;
边框：1px纯黑色;
}
< / style>
< / head>
< body>
< script type =text / javascript>
var counter = 1;
function create（）
{
var newdiv = document.createElement（div）;
newdiv.style.width =100px;
newdiv.style.height =100px;
newdiv.style.background =red;
newdiv.style.border =1px solid black ;
newdiv.style.color =white
newdiv.innerHTML = counter ++;
newdiv.style.position =绝对;
newdiv.style.float =left;
newdiv.style.top = document.getElementById（ textField）。value +px;
document.getElementById（parentdiv）。appendChild（newdiv）;
}
< / script>
从顶部输入位置：
< input type =textid =textField>
< input type =buttonvalue =创建子divid =new buttononclick =create（）/>
I just learnt DOM in JavaScript and was playing with JavaScript and css.
In this code ,I wanted to know if there is a way to place the child div's side by side instead of overlapping.
<!doctype html>
<html>
<head>
<style type="text/css">
#parentdiv
{
margin-top: 10px;
height:800px;
width:800px;
position: relative;
border:1px solid black;
}
</style>
</head>
<body>
<script type="text/javascript">
var counter=1;
function create()
{
var newdiv = document.createElement("div");
newdiv.style.width = "100px";
newdiv.style.height = "100px";
newdiv.style.background = "red";
newdiv.style.border = "1px solid black";
newdiv.style.color ="white"
newdiv.innerHTML = counter++;
newdiv.style.position = "absolute";
newdiv.style.float="left";
newdiv.style.top = document.getElementById("textField").value + "px";
document.getElementById("parentdiv").appendChild(newdiv);
}
</script>
Enter position from top:
<input type="text" id="textField">
<input type="button" value="Create child Div " id="new button" onclick="create()"/>
< / body>
< / html>
</body>
</html>
推荐答案
并排可以区别对待;有许多微妙的细节，如垂直对齐;你需要填写水平空间，如何;如果你需要高度匹配，等等。这是一个非常优雅的简单解决方案。
"Side by side" could be understand differently; there are many subtle detail, such as vertical alignment; do you need to fill in the horizontal space or not, how; if you need a match of height or not, and so on. Thy this pretty elegant ans simple solution.
<html>
<head>
<title>Some title</title>
<style type="text/css">
div { padding: 1em; }
div.parent { display: table; }
div.left { display: table-cell; border: solid 2px red; }
div.right { display: table-cell; border: solid 2px green; }
</style>
</head>
<body>
<div class="parent">
<div class="left">Left<br/><br/>…to demonstrate<br/>different<br/>contect height<br/></div>
<div class="right">Right</div>
</div>
</body>
</html>如果您的要求不同，请随时提出进一步的问题。
If your requirements are different, feel free to ask further questions.
这篇关于请帮助我使用CSS定位div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
