Question

我试图在网站上放置一些div，所以它看起来很整洁。有一个大的容器＆＃34;容器＆＃34;在里面我们有div＆＃34; head＆＃34;，在它下面有一个空的div只是为了分隔事物而在它下面有一个div＆＃34; content＆＃34;。我的问题是：＆＃34; head＆＃34;很容易以＆＃34; margin：0 auto;＆＃34;为中心，但是同一行不能在＆＃34;内容＆＃34;中工作。

＆＃13;

#container
{
    background-color: darkorange;
    width: 70%;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
}

#head
{
    background-color: lightblue;
    width: 95%;
    height: 80px;
    margin: 0 auto;
}

.space
{
    width: auto;
    height: 10px;
    background-color: red;
}

#content
{
    background-color: forestgreen;
    width: 95%;
    height: 600px;
    margin: 0 auto;
}

＆＃13;

<div id="container">
            <div id="head">
                <div id="reg_welcome">
                    
                </div>
                <div id="logo">
                    
                </div>
                <div id="login_out">
                    
                </div>
            </div>
            <div class="space">
            </div>
            <div id="content">
              
            </div>
            <div class="space">
            </div>
            <div id="footer">
                
            </div>
        </div>

＆＃13;

知道为什么吗？（颜色只是为了看它的外观，请忽略它们）

第二个问题，类似的问题。内部＆＃34;头部＆＃34;有三个小div我想浮到左边。其中两个表现得像我想要的那样，第一个甚至没有在网站上展示过。这是这三位的css：

＆＃13;

#reg_welcome
{
    background-color: royalblue;
    float: left;
    width: 100px;
    height: 75px;
    margin-right: 40px;
}

#logo
{
    background-color: springgreen;
    width: 300px;
    height: 75px;
    float: left;
}

#login_out
{
    background-color: teal;
    float: left;
    width: 120px;
    height: 75px;
    margin-left: 40px;
}

＆＃13;

<div id="container">
            <div id="head">
                <div id="reg_welcome">
                    
                </div>
                <div id="logo">
                    
                </div>
                <div id="login_out">
                    
                </div>
            </div>
            <div class="space">
            </div>
            <div id="content">
                
            </div>
            <div class="space">
            </div>
            <div id="footer">
                
            </div>
        </div>

＆＃13;

最奇怪的是，这一切看起来都很完美，但是当在localhost上运行时，我遇到了我提到的问题。知道为什么会这样吗？

Div不以CSS为中心

0 个答案: