我想在 div(div.content) 的左下角放置一个表单字段 (div.invoer)
<body>
<div id="container" style="width:1280px";"height:800px">
<div id="header" style=;"background-color:#FFA500;""width:1280px";"height:200px">
<h1>EXPORT ZENDINGEN</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:600px;width:700px;float:left;">
</div>
<div id="content" style="background-color:#EEEEEE;height:600px;width:580px;float:right;">
<div id="invoer">
<form method="post" action="">
<label>Debiteur</label>
<input type="text" name="deb_nmr" />
<br />
<label>Klantnaam</label>
<input type="text" name="cost_name" />
<br />
<label>Aantal Pallets</label>
<input type="text" name="numb_pallets" />
<br />
<label>Totaal Gewicht</label>
<input type="text" name="tot_weight" />
<br />
<label>PB Nummers</label>
<input type="text" name="PB's" />
</form>
</div>
</div>
</div>
</body>
使用了以下 Css:
label{
display:inline-block;width:100px;margin-bottom:10px;
}
.content{
position: relative;
}
.invoer{
position: absolute;
bottom: 0px;
}
使用了来自 W3school 的信息，但无法开始工作。找到了有关堆栈溢出的更多信息，例如使用相对位置和绝对位置。但是表单保留在内容 div 的左上角。
最佳答案
content 和 invoer 是 ids 而不是 classes 所以使用它们的正确方法是 #content ,#invoer 不是 .Content , .content。
Everything is correct just replace the following css from this:
label{
display:inline-block;width:100px;margin-bottom:10px;
}
#content{
position: relative;
}
#invoer{
position: absolute;
bottom: 0px;
}
to this:
label{
display:inline-block;width:100px;margin-bottom:10px;
}
#content{
position: relative;
}
#invoer{
position: absolute;
bottom: 0px;
}
Here is the updated code.
label{
display:inline-block;width:100px;margin-bottom:10px;
}
#content{
position: relative;
}
#invoer{
position: absolute;
bottom: 0px;
}<div id="container" style="width:1280px ; height:800px">
<div id="header" style=" background-color:#FFA500; width:1280px;height:200px">
<h1>EXPORT ZENDINGEN</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:600px;width:700px;float:left;">
</div>
<div id="content" style="background-color:#EEEEEE;height:600px;width:580px;float:right;">
<div id="invoer">
<form method="post" action="">
<label>Debiteur</label>
<input type="text" name="deb_nmr" />
<br />
<label>Klantnaam</label>
<input type="text" name="cost_name" />
<br />
<label>Aantal Pallets</label>
<input type="text" name="numb_pallets" />
<br />
<label>Totaal Gewicht</label>
<input type="text" name="tot_weight" />
<br />
<label>PB Nummers</label>
<input type="text" name="PB's" />
</form>
</div>
</div>关于html - 在 div 底部放置表单字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43557271/