容器div对齐不正确

Question

I have a container div that is not aligning properly, nor can I keep divs inside a container div aligned right or left. 我的容器div不能正确对齐，也不能使容器div内的div左右对齐。 It keeps on coming out of the main div or container. 它不断从主div或容器中出来。

Here's my simple homepage design but the divs are not indenting properly according to this layout: 这是我简单的首页设计，但是div根据此布局未正确缩进：

 #container{ background-color:white; width:100%; height:1200px; } #logo{ background-color:yellow; width:30%; height:100px; float:left; } #header{ background-color:green; width:100%; height:100px; float:left; } #navigation{ width:100%; height:40px; background-color:white; float:left; } #webname{ background-color:gray; width:70%; height:100px; float:right; } #mainclass{ width:100%; height:950px; float:left; } #asideright{ background-color:red; width:10%; height:950px; float:right; } #asideleft{ background-color:purple; width:20%; height:950px; float:left; } #selection{ background-color:yellow; width:70%; height:950px; float:center; } #footer{ background-color:green; width:100%; height:100px; float:;left; }

 <html> <head> <title id="title">DUMMY </title> <link rel="icon" type="image/jpeg" href="dummy1.jpeg"> <link rel="stylesheet" type="text/css" href="dumm1.css"> </head> <body> <div id="container"> <div id="header"> <div id="logo"> </div> <div id="webname"> </div> </div> <div id="navigation"> </div> <div id="mainclass"> <div id="asideleft"> </div> <div id="selection"> </div> <div id="asideright"> </div> </div> <div id="footer"> </div> </div> </body> </html>

Answer 1

There is no such property as float: center; 没有诸如float: center;类的属性float: center; you have to change that property for #selection to float: left; 您必须更改该属性以使#selection float: left; . 。

Please refer to this tutorial. 请参考本教程。

Answer 2

You can use this approach . 您可以使用此方法。

 * { margin: 0; padding: 0; } .container { width: 1170px; } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; background-color:red; } .row { margin-right: -15px; margin-left: -15px; } .inner_div { width: 25%; float:left; background-color:green; } .big_div { width: 75%; float:left; background-color:yellow; }

 <html> <head> <title id="title">DUMMY </title> <link rel="icon" type="image/jpeg" href="dummy1.jpeg"> <link rel="stylesheet" type="text/css" href="dumm1.css"> </head> <body> <div class="container"> <div class="row"> <div class="inner_div" style="background-color:purple;"> i'm the inner container </div> <div class="inner_div" style="background-color:pink;"> i'm another one </div> <div class="inner_div" style="background-color:green;"> another one </div> <div class="inner_div" style="background-color:orange;"> woho! another one </div> <div class="big_div"> yipee! i'm another container </div> <div class="inner_div" style="background-color:red;"> yehaa! i'm another container </div> </div> <div id="navigation"> </div> <div id="mainclass"> <div id="asideleft"> </div> <div id="selection"> </div> <div id="asideright"> </div> </div> <div id="footer"> </div> </div> </body> </html>

Answer 3

this is your correct css 这是你正确的CSS

    #container {
        background-color: white;
        width: 100%;
        height: 1200px;
    }

    #logo {
        background-color: yellow;
        width: 30%;
        height: 100px;
        float: left;
    }


    #header {
        background-color: green;
        width: 100%;
        height: 100px;
        float: left;
    }

    #navigation {
        width: 100%;
        height: 40px;
        background-color: white;
        float: left;
    }


    #webname {
        background-color: gray;
        width: 70%;
        height: 100px;
        float: right;
    }

    #mainclass {
        width: 100%;
        height: 950px;
        /*float: left;*/
    }


    #asideright {
        background-color: red;
        width: 10%;
        height: 950px;
        float: right;
    }

    #asideleft {
        background-color: purple;
        width: 20%;
        height: 950px;
        float: left;
    }

    #selection {
        background-color: yellow;
        width: 70%;
        height: 950px;
        float: left;
    }

    #footer {
        background-color: green;
        width: 100%;
        height: 100px;
        float: left;
    }

容器div对齐不正确

问题描述

3 个解决方案

解决方案1
0 2015-06-14 05:54:12

解决方案2
0 2015-06-14 06:45:52

解决方案3
0 已采纳 2015-06-14 06:51:07

容器div对齐不正确

问题描述

3 个解决方案

解决方案1 0 2015-06-14 05:54:12

解决方案2 0 2015-06-14 06:45:52

解决方案3 0 已采纳 2015-06-14 06:51:07

解决方案1
0 2015-06-14 05:54:12

解决方案2
0 2015-06-14 06:45:52

解决方案3
0 已采纳 2015-06-14 06:51:07