Question

使用花车，我怎样才能让紫色盒子正好位于黄色框的正下方和蓝色框的右侧？如果我在紫色框上使用清除左侧，它将在蓝色框的正下方排列，因此这不是解决方案。可以在下面的链接上看到图像。谢谢！

<!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中。此外，使用一个类而不是多个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>框正好位于黄色框的正下方和蓝色框的右侧？

3 个答案: