使用浮动，我怎样才能让紫色 <div> 框恰好在黄色框下方和蓝色框右侧对齐？

Question

使用浮动，我怎样才能让紫色框恰好在黄色框下方和蓝色框右侧对齐？如果我在紫色框上使用 clear left 它会排在蓝色框的正下方，所以这不是解决方案。可以看到下面link上的图片。谢谢！

<!DOCTYPE html>

<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Float Demo</title>

    <style>

        body {
          background-color: #FFFFFF;
        }

        li {
          display: inline-block;
        }

        #box {

          width: 200px;
          border-style: solid;
          border-width: 1px;
          border-color: Black;
        }

        .red {
          background-color: red;
          float: left;
          height: 200px;
        }

        .green {
          background-color: green;
          float: left;
          height: 200px;
        }

        .blue {
          background-color: blue;  
          height: 400px;
          float: left;
          clear: left;
        }

        .yellow {
          background-color: yellow;
          float: left;
          height: 200px;
        }

        .purple {
          background-color: purple;
          float: left;
          height: 200px;
        }

        </style>
  </head>
  <body>

    <div id="box" class=red></div>
    <div id="box" class=green></div>
        <div id="box" class="blue"></div>
    <div id="box" class=yellow></div>
        <div id="box" class=purple></div>


  </body>
</html>

Click this line to link to the file I'm having trouble with

Answer 1

添加会溢出黄色框 + 蓝色框但不会仅溢出蓝色框的边距：

喜欢（1600x900 屏幕）：

.purple {
    margin-right: 1000px;
}

为了给出一个可用的答案，您可以使用 calc 来获得每个屏幕的正确边距：

margin-right: calc(100% - 404px); /* each box is 200px + 2px of border */

Answer 2

将黄色和紫色的盒子包裹在它们自己的 div 中。此外，对框使用 class 而不是多个 id - 让多个元素共享相同的 id 是错误的形式。

<!DOCTYPE html>
<html>
<head>
<style>
    .lv-1 { float: left; }

    .box {
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }

    #red { background-color: red; }
    #green { background-color: green; }
    #blue {
        background-color: blue;
        height: 400px;
        clear: left;
    }
    #yellow { background-color: yellow; }
    #purple { background-color: purple; }
</style>
</head>
<body>
    <div id='red' class='box lv-1'></div>
    <div id='green' class='box lv-1'></div>
    <div id='blue' class='box lv-1'></div>
    <div class='wrap lv-1'>
        <div id='yellow' class='box'></div>
        <div id='purple' class='box'></div>
    </div>
</body>
</html>

jsfiddle: https://jsfiddle.net/jpqq99h9/

Answer 3

我会将红色、绿色、蓝色作为行内块元素放在 div 中，但绝对定位蓝色。确保 div 具有相对位置。黄色和紫色也作为行内块元素在下面 div.

使用浮动，我怎样才能让紫色 <div> 框恰好在黄色框下方和蓝色框右侧对齐？

Using floats, how can I get the purple <div> box to line up exactly below the yellow box and to the right of the blue box?

html

css

floating