在div底部定位表单字段

I want to place a form field(div.invoer) in the left bottom of a div(div.content)

我想在div的左下角放置一个表单字段（div.invoer）（div.content）

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

Used the following Css:

使用以下Css：

label{
    display:inline-block;width:100px;margin-bottom:10px;
}

.content{
    position: relative;

}

.invoer{
    position: absolute;
    bottom: 0px;
}

Used info from W3school but can't get in to work. Found some more information on stack overflow, like using position relative and absolute. But the form stays in the upper left of the content div.

来自W3school使用的信息，但无法进入工作。找到有关堆栈溢出的更多信息，例如使用position relative和absolute。但表单保留在内容div的左上角。

2 个解决方案

#1

content and invoer are ids not classes so the correct way to use them is #content ,#invoer not .Content , .content.

内容和调用者是ID而不是类，所以使用它们的正确方法是＃content，＃invoer not .Content，.content。

Everything is correct just replace the following css from this:

一切都是正确的，只需从下面替换以下css：

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>

#2

  <div id="invoer">

But in css you tagged it as a class

但是在css中你把它标记为一个类

.invoer{
    position: absolute;
    bottom: 0px;
}

However - change it to # and you should be able to style it.

但是 - 将它改为＃，你应该能够设计它。

#invoer{
  //some css
}

#1