Question

顶部的图片显示了它的结果，最下面的部分显示了它应该如何。所以我需要帮助的是正确放置白色“盒子”。

我的代码

div {
  border: solid 1px black;
}
#div1 {
  background-color: Silver;
  height: 300px;
  width: 100px;
  margin-bottom: 5px;
}
.ruta {
  background-color: white;
  height: 200px;
  width: 400px;
  margin-left: 120px;
}
#div2 {
  background-color: Black;
  width: 402px;
  height: 10px;
  align-top:5px;
}

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="stylesheet.css">
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <div id="div1"></div>
    <div class="ruta"></div>
    <div id="div2"></div>
  </body>
</html>

这是我们应该编辑的原始代码。应填写空白区域。

________ 
{ 
border: solid 1px black; 
}
_______ 
{ 
background-color: Silver; 
height: 300px; 
width: 100px;
________________________ 
}
   
 _______ 
{ 
background-color: White; 
height: 200px; 
width: 400px; 
margin-left: 120px; 
}
_______ 
{ background-color: Black; 
width: 402px; 
height: 10px; 
margin-top: 5px;
________________________ 
}

<body> 
  <div id="div1"></div> 
  <div class="ruta"></div> 
  <div id="div2"></div> 
</body>

Answer 1

＆＃13;

div
{ 
border: solid 1px black; 
}
#div1 
{ 
background-color: Silver; 
height: 300px; 
width: 100px;
float:left;//this will align your sidebar to left and clear aditional space
}
   
 .ruta 
{ 
background-color: White; 
height: 200px; 
width: 400px; 
margin-left: 120px; 
}
#div2
{ 
background-color: Black; 
width: 402px; 
height: 10px; 
margin-top: 5px;
clear:both;//added
}

＆＃13;

<body> 
  <div id="div1"></div> 
  <div class="ruta"></div> 
  <div id="div2"></div> 
</body>

＆＃13;

简单的CSS / HTML框

1 个答案: