两个div之间的垂直距离

Question

有人能帮我纠正一个问题吗？我想在两个div之间设置间距，但这样做会将两个div一起移动。我的代码如下：

@charset "utf-8";

/* CSS Document */

* {
  box-sizing: border box;
}
body {
  background-image: url(../images/nature_beach-1280x800.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  margin: 0;
}
html {
  height: 100%;
}
#container {
  background-color: rgba(255, 255, 255, .50);
  height: 65%;
  width: 30%;
  box-sizing: border-box;
  transform: translate(200%, 20%);
  font-family: Myriad Pro;
  font-size: 20px;
}
#login {
  text-align: center;
  padding: 5%;
  font-weight: bold;
}
#form {
  margin-top: 5%;
  margin-left: 10%;
}
.textfield {
  height: 25px;
  width: 250px;
  background-color: rgba(109, 207, 246, .50);
  border: none;
}
.fieldname {
  float: left;
}
.textbox {
  float: right;
  margin-right: 10%
}
#container2 {
  /*What should I put here??*/
}

<div id="container">
  <div id="login">
    Login
  </div>
  <div id="form">
    <div id="container1">
      <span class="fieldname">Username</span>
      <span class="textbox"><input class="textfield" type="text" /></span>
    </div>
    <div id="container2">
      <span class="fieldname">Password</span> 
      <span class="textbox"><input class="textfield" type="text" /></span>
    </div>
  </div>
</div>

当我在CSS中将margin-top:5%设置为container2时，两个div都会根据margin移动。我想做的是两个div之间的可变空间。将padding应用于container2会破坏布局。

请帮我解决这个问题。 演示链接

- user3889963

---

不相关，但那个变换是怎么回事？为什么你要使用 translate() 来定位，而不是使用内置的 CSS 定位规则呢？ - Ken Bellows

尝试使用 padding-top: 60px;，50及以上应该有效。 - Pugazh

是的...成功了!! 谢谢Pugazh。有人能解释一下为什么上边距没有起作用吗？ - user3889963

因为您正在使用浮点数和位移来定位元素。通过这样做，容器2的高度为0。请使用正常的方式定位元素以避免此类冲突。 - Laurens

明白了。非常感谢您的快速回答。 - user3889963

我添加了一些关于如何使浮动元素计算父元素高度的信息。但是我建议使用inline-block和flexbox，而不是浮动元素。 - IdeaMan

Answer 1

您有一些高度为零的元素，因为浮动的div不会增加父元素的高度。
如果您想了解更多，请阅读有关clearfix的内容。 https://jsfiddle.net/y30tosp5/

#container1{
    overflow: auto
}
#container2{
     margin-top: 2%;
     overflow: auto
}

什么是clearfix？这里有更多信息。
并且，正如所说的那样，最好开始使用inline-block或flexbox，以彻底避免这个问题。

- IdeaMan

Answer 2

首先，这里有一个语法错误：

*{
    box-sizing:border box;
}

这是一个关于IT技术的翻译：border-box 是一种盒模型。

然后我稍微修改了你的结构，在这里用 div 替换了 span：

<div id="form">
    <div id="container1">
        <div class="fieldname">Username</div>
        <div class="textbox"><input class="textfield" type="text" /></div>
    </div>
    <div id="container2">
        <div class="fieldname">Password</div> 
        <div class="textbox"><input class="textfield" type="text" /></div>
    </div>
</div>

请移除translate属性，以便使用margin:auto;正确居中表单容器。

接下来，您可以像您想要的那样将#container2的上边距设为所需值：

#container2{
  margin-top : 20px;
}

点击此处查看实时示例

- Vincent G

Answer 3

只需添加这些样式：

#container1 {
  margin-bottom: 18px;
  overflow: auto;
  width: 380px;
}
#container2 {
  overflow: auto;
  width: 380px;
}

- Amin Gholibeigian

Answer 4

不确定最终期望的结果，也不确定您的方法 :)

您可以使用不同的值进行转换

这里的重点是什么？对齐右侧元素和一些垂直对齐？问题不清楚翻译的目的 :)

@charset "utf-8";

/* CSS Document */

* {
  box-sizing: border box;
}
body {
  background-image: url(../images/nature_beach-1280x800.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  margin: 0;
}
html {
  height: 100%;
}
#container, #container2 {
  background-color: rgba(255, 255, 255, .50);
  height: 65%;
  width: 30%;
  box-sizing: border-box;
  transform: translate(200%, 20%);
  font-family: Myriad Pro;
  font-size: 20px;
}
#login {
  text-align: center;
  padding: 5%;
  font-weight: bold;
}
#form {
  margin-top: 5%;
  margin-left: 10%;
}
.textfield {
  height: 25px;
  width: 250px;
  background-color: rgba(109, 207, 246, .50);
  border: none;
}
.fieldname {
  float: left;
}
.textbox {
  float: right;
  margin-right: 10%
}
#container2 {
  /*What should I put here??*/
  
  transform: translate(200%, 40%);
}

<div id="container">
  <div id="login">
    Login
  </div>
  <div id="form">
    <div id="container1">
      <span class="fieldname">Username</span>
      <span class="textbox"><input class="textfield" type="text" /></span>
    </div>
    <div id="container2">
      <span class="fieldname">Password</span> 
      <span class="textbox"><input class="textfield" type="text" /></span>
    </div>
  </div>
</div>

- G-Cyrillus

---

你真的建议使用 transform 来实现高度为 0 的元素的边距吗？这是不好的做法。 - Laurens

@Laurens，我建议在这种情况下不要使用转换技术，因为它并不准确。我们需要采用其他更智能的方法。否则就像初学者一样使用绝对定位... - G-Cyrillus

那么，一般来说，转换是不好的实践吗？但是我该如何避免div浮动，因为我需要它们在同一行中？ - user3889963

@user3889963 不需要，除非你知道为什么使用它，这里的重点是什么？调整右侧元素和一些垂直对齐吗？此处的翻译目的不清楚 :) - G-Cyrillus

@user3889963 如果要使用百分比值来填充顶部或底部，请使用宽度作为计算距离的参考... 垂直边距也是如此。 - G-Cyrillus