Question

我想在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的使用信息，但无法上班。找到有关堆栈溢出的更多信息，例如使用position relative和absolute。但表单保留在内容div的左上角。

Answer 1

内容和发件人 ID 不是类，因此使用它们的正确方法是#content ,#invoer而不是.Content , .content 。

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

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

#content{
    position: relative;

}

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

到此：

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

#content{
    position: relative;

}

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

这是更新的代码。

＆＃13;

label{
    display:inline-block;width:100px;margin-bottom:10px;
}

#content{
    position: relative;

}

#invoer{
    position: absolute;
    bottom: 0px;
}

＆＃13;

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

＆＃13;

Answer 2

  <div id="invoer">

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

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

但是 - 将其更改为＃，您应该可以设置样式。

#invoer{
  //some css
}

在div的底部定位表单字段

2 个答案: