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都根据边距移动。我想要做的是两个div之间的可变空间。填充到容器2会弄乱布局。

请帮帮我。

Demo LINK

Answer 1

https://jsfiddle.net/y30tosp5/ 你的元素高度为零，cos浮动的div不会增加父母的身高如果您想了解更多信息，请阅读clearfix。

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

What is a clearfix?这里有更多信息如上所述，最好开始使用ether inline-block或flexbox，以一劳永逸地避免这个问题。

Answer 2

首先，你在这里遇到语法错误：

*{
    box-sizing:border box;
}

border-box 。

然后我改变了一点结构，用span替换div就在这里：

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

并移除tranlate属性，使表单容器正确居中margin:auto;。

然后我可以根据需要为#container2添加一个margin-top：

#container2{
  margin-top : 20px;
}

See a live example

Answer 3

不确定预期的最终结果，并且确实不确定您的方法：）

您可以使用具有不同值的变换

这里有什么意义？对齐正确的元素和一些垂直对齐？关于翻译目的的问题尚不清楚：）

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

Answer 4

只需添加以下样式：

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

两个div之间的垂直距离

4 个答案: