Question

我有5个浮动div的问题，这是一张图片：

5 floating divs

你会看到..绿色div应位于红色div的左侧（而不是空位）和绿色div的位置上的紫色div。来自div的html命令是：蓝色，红色，橙色，绿色和紫色，我认为这是这个白色，空白空间的原因，因为绿色和紫色div在html之后出现！红色的div，这是对的吗？我能做些什么，解决这个问题，谁都有想法？我将紫罗兰的margin-top设置为-300px，但我认为这不是一个干净的解决方案，而且订单（html结构）是假的。

这是我的完整HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>ResponsiveExample</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="layout.css">
        <script src="js/libs/jquery/jquery.js"></script>
    </head>
    <body>
        <div class="page-wrapper">
            <header>
                <div class="header">
                </div>
                <div class="below-header"></div>
            </header>

            <div class="main-content">
                <div class="blue-box"></div>
                <div class="red-box"></div>
                <div class="orange-box"></div>
                <div class="green-box"></div>
                <div class="violet-box"></div>
            </div>

            <footer>

            </footer>
        </div>
    </body>
</html>

这是我的CSS：

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body
{
    margin: 0;
    padding: 0;
}    
.header{
    position: fixed;
    height: 50px;
    width: 100%;
    background-color: grey;
} 
.below-header{
    height: 50px;
    width: 100%;
}    
.blue-box{
    height: 300px;
    background-color: blue;
}   
.red-box{
    height: 600px;
    background-color: red;
}

.orange-box{
    height: 300px;
    background-color: orange;
}
.green-box{
    height: 300px;
    background-color: greenyellow;
}
.violet-box{
    height: 300px;
    background-color: violet;
}

@media only screen and (min-width: 28.125em) {
    .blue-box{
        float: left;
        width: 50%;
    }
    .red-box
    {
        float: left;
        width: 100%;
    }
    .orange-box{
        float: left;
        width: 50%;
    }
    .green-box{
        float: left;
        width: 50%;
    }

    @media only screen and (min-width: 71.875em){
        .blue-box{
            width: 33%;
            border: 5px solid black;
        }
        .red-box{
            width: 33%;
            border: 5px solid black;   
        }
        .orange-box{
            width: 33%;
            border: 5px solid black;
            clear: right;        
        }
        .green-box{
           width: 33%;
           border: 5px solid black;
           clear: right;

        }
        .violet-box{
            width: 33%;
            //margin-top: -300px;
            border: 5px solid black;
           float: left;
        }   
    }   
}

我会非常感谢我得到的每一个帮助！

Answer 1

试试这个：

<div class="main-content">
    <div id="left">
         <div class="blue-box"></div>
         <div class="green-box"></div>
    </div>
    <div id="center">
         <div class="red-box"></div>
    </div>
    <div id="right">
        <div class="orange-box"></div>
        <div class="purple-box"></div>
    </div>
</div>

然后根据自己的喜好应用CSS样式。

浮动/清算部门，响应式设计

1 个答案: