Question

好的，所有人基本上发生的事情是我到目前为止我的网站设置了顶部有我的标识然后在中间我想要三个盒子。我可以让左边的那个去左边的顶部，我希望它与第二个相同。但第三次，当我使用浮动权利时，他不会像我告诉他的那样排队。有人可以请我这个吗？真的很感激！enter code here

fiddle here

<DOCTYPE! HTML>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Welcome</title>
    <link rel="stylesheet" href="css/first.css" />
    <link rel="stylesheet" href=css/animations.css />
    <link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
    </head>


    <body>
        <div class="wrap">

        <div class="top_portion">

        <div class="logo">
            <img src="img/2a685fsaq.png"/>
        </div>
        </div>
    <div class="center">
        <div class="cleft_portion">

        </div>

        <div class="mid_portion">

        </div>

        <div class="cright_portion">

        </div>
    </div>

    </div>

    </body>

    </head>

    </html>

Answer 1

你需要将正确的容器放在中间容器之前：

<div class="center">
        <div class="cleft_portion">

        </div>
        <div class="cright_portion">

        </div>
        <div class="mid_portion">

        </div>


    </div>

Answer 2

更好的解决方案是避免浮动并使用display:table

请参阅 demo here

<强> HTML

 <div class="center" style="display:table">
        <div class="cleft_portion" style="display:table-cell">

        </div>

        <div class="mid_portion" style="display:table-cell">

        </div>

        <div class="cright_portion" style="display:table-cell">

        </div>
    </div>

我删除了float并添加了table显示...如果您正在寻找IE8 +浏览器，它会更好!!

Answer 3

尝试这个

.cleft_portion  {
    position:relative;
    height:400px;
    width:400px;
    background-color:#3fb9a7;
    float:left;
}

.mid_portion    {
    position:relative;
    height:400px;
    width:400px;
    background-color:#55948b;
    float:left;
}

.cright_portion {
    position:relative;
    height:400px;
    width:400px;
    background-color:#3fb9a7;
    float:right;
}

http://jsfiddle.net/v4YwC/2/

Answer 4

你的.mid_portion没有浮动。还应该向左浮动。

不能让正确的中间部分留在右边

4 个答案: