Question

我是CSS的新手。我有一个问题，我只是在这里玩div，我有这些：

<html>
<head>
    <title>My web page</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <div id = "first">
        <div id= "second"></div>
        <div id="third"></div>
        <div id="fourth"></div>
        <div id="fifth"></div>
        <footer></footer>
    </div>
</body>

这是CSS：

#first
{
    width:600px;
    height:400px;
    background-color:#666;
    margin:auto;
    position:relative;
}

#second
{
    width:100%;
    height:20%;
    background-color:yellow;
    position:relative;
}


#third
{
    margin:auto;
    width:15%;
    height:70%;
    background-color:#00FF00;
    position:relative;
    margin-left:0;
    display:inline-block;
    float:left;
}

#fourth
{
    width:70%;
    height:70%;
    position:relative;
    display:inline-block;
    margin:auto;
    background-color:red;   
}

#fifth
{
    margin:auto;
    width:15%;
    height:70%;
    background-color:#E0AF00;
    position:relative;
    display:inline-block;
    float:right;
}

footer
{
    background-color:black;
    height:10%;
    clear:both;
}

问题是右栏落在右下方并且没有向右移动，问题是什么？

Answer 1

将元素#third和#fifth移到HTML标记的顶部。这两个div具有float: left|right属性，因此最方便的是将它们移到#fourth div之上。

<body>
    <div id="first">
        <div id="second"></div>
        <div id="third"></div>
        <div id="fifth"></div>
        <div id="fourth"></div>
        <footer></footer>
    </div>
</body>

我更新了代码，这里是JSFIDDLE以表明它有效。注意我还删除了所有display: inline-block属性，以移除<footer>上方不需要的空白区域。

这是一个关于这个浮动问题的可视化示例：

enter image description here

为什么列不会向右移动

1 个答案: