Question

所以我是网络开发人员的新手，只是试图抓住移动div的悬念，但当我包含任何浮动语句时，我的背部消失了。以下面的代码为例，如果删除float: right，我的第二个部门会重新出现。这种情况发生在我尝试浮动其中任何一个，甚至尝试display: inline-block有人帮助!! :)谢谢。

我想要注意我已经尝试了每一个我想到的浮动组合，只是为了看看我是否以错误的方式漂浮它们。

body {
  background-color: grey;
}


.division1 {
  background-color:blue;
  max-width: 100px;
  min-height: 100px;
}

.division2 {
  background-color: green;
  max-width: 100px;
  min-height: 100px;
  margin-left: 10px;
  float:right;
}

<!DOCTYPE>
<html>
<head>
  <title> Practice with divs!</title>
  <link href = "style.css" type = "text/css" rel = "stylesheet"/>
</head>
<body>
    <div class = "division1"></div>
    <div class = "division2"></div>
</bod1y>
</html>

Answer 1

如果你向身体添加边框，你会看到发生了什么。您仍然需要设置宽度或最小宽度（或给它一些内容）才能显示：

body {
  background-color: grey; 
  border: 3px dotted red;
}

.division1 {
  background-color:blue;
  max-width: 100px;
  min-height: 100px;
}

.division2 {
  background-color: green;
  max-width: 100px;
  min-height: 100px;
  /* min-width: 100px; */
  margin-left: 10px;
  float:right;
}

<!DOCTYPE>
<html>
<head>
  <title> Practice with divs!</title>
</head>
<body>
    <div class = "division1"></div>
    <div class = "division2">x</div>

</body>
</html>

如果您只想将两个大小相同的盒子放在一起，那么有更好的方法：

body { 
  height: 100px; width: 500px;
  border: 3px dotted red;

  display: flex;
  justify-content: space-between;
}
.one { width: 300px;  background-color: lightblue; }
.two { flex: 1;       background-color: lightgreen; }
body>div { 
  padding: 1ex;
  text-align: justify;
}

<body>
  <div class="one">Fixed width column..  "Sed ut perspiciatis unde
    omnis iste natus error sit voluptatem accusantium doloremque
    laudantium, totam rem aperiam, eaque ipsa quae ab illo
    inventore </div>
  <div class="two">"Sed ut perspiciatis unde omnis iste natus error
  sit voluptatem accusantium doloremque laudantium</div>
</body>

Answer 2

body {
  background-color: grey;
}


.division1 {
  background-color:blue;
  max-width: 100px;
  min-height: 100px;
  width: 100px;
  float: left;
}

.division2 {
  background-color: green;
  max-width: 100px;
  min-height: 100px;
  margin-left: 10px;
  width: 100px;
  float:right;
}

<!DOCTYPE>
<html>
<head>
  <title> Practice with divs!</title>
  <link href = "style.css" type = "text/css" rel = "stylesheet"/>
</head>
<body>
    <div class = "division1"></div>
    <div class = "division2"></div>
</bod1y>
</html>

你必须给它一个宽度，否则，它将具有0px的宽度，因此不会显示。另外，浮动两个div，使它们看起来彼此相邻。我希望这是你想要创造的结果。

Answer 3

我能够让他们彼此靠近并通过在他们周围放置一个容器并为该容器设置大小来对齐。

试试＆＃34; ems＆＃34;或像素以获得更高的准确度。

＆＃13;

  

  body {
      background-color: grey;
    }


   body {
  background-color: grey;
}
.container{
  width:35%;
}

.division1 {
  background-color:blue;
  width: 100px;
  height: 100px;  
  float:left;
}

.division2 {
  background-color: green;
  width: 100px;
  height: 100px;
  float:right;
}

＆＃13;

    <!DOCTYPE>
    <html>
    <head>
      <title> Practice with divs!</title>
      <link href = "style.css" type = "text/css" rel = "stylesheet"/>
    </head>
    <body>
        <div class="container">
    <div class = "division1"></div>
    <div class = "division2"></div>
</div>
    </body>
    </html>

＆＃13;

浮动div无法使用浮动或显示

3 个答案: