Question

body {
  margin: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  background-color: red;
}
.item {
  width: 33.33vw;
  height: 33.33vw;
  float: left;
}
#featured {
  background-color: green;
  width: 66.66vw;
}
#vertical {
  background-color: blue;
  height: 66.66vw;
}
#normal01 {
  background-color: pink;
}
#normal02 {
  background-color: yellow;
}

<div class="container">
  <div class="item" id="featured">
  </div>
  <div class="item" id="vertical">
  </div>
  <div class="item" id="normal01">
  </div>
  <div class="item" id="normal02">
  </div>
</div>

我目前正在学习HTML / CSS，我似乎无法在网上找到任何基本的“模板”。如您所见，我的粉红色和黄色方块不想与顶部绿色矩形相撞。大约2个小时，我正在尝试不同的技术而不解决这个问题，有人能指出我正确的方向吗？

实现我正在尝试做的事情的最佳方式是什么，即使是正确的方式还是浮动式？

Answer 1

要解决此特定情况，请将float: right添加到#vertical。如果它有float: left，则不允许任何后续元素。

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <style>
         body {
         margin: 0;
         }
         .container {
         width: 100vw;
         height: 100vh;
         background-color: red;
         }
         .item {
         width: 33.33vw;
         height: 33.33vw;
         float: left;
         }
         #featured {
         background-color: green;
         width: 66.66vw;
         }
         #vertical {
           float: right;
         background-color: blue;
         height: 66.66vw;
         }
         #normal01 {
         background-color: pink;
         }
         #normal02 {
         background-color: yellow;
         }
      </style>
      <div class="container">
         <div class="item" id="featured">
         </div>
         <div class="item" id="vertical">
         </div>
         <div class="item" id="normal01">
         </div>
         <div class="item" id="normal02">
         </div>
      </div>
   </body>
</html>

“浮动：左”不按预期工作

1 个答案: