Question

如何将蓝色分区放在红色和右侧的右侧？绿色的？

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            #red {width:100px; height:50px; background:red;}
            #green {width:100px; height:50px; background:green;}
            #blue {width:100px; height:100px; background:blue;}
        </style>
    </head>
    <body>
        <div id="red"></div>
        <div id="green"></div>
        <div id="blue"></div>
    </body>
</html>

我知道如何通过添加另一个div作为第一和第二部门的父级来实现：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            #parent {float:left;}
            #red {width:100px; height:50px; background:red;}
            #green {width:100px; height:50px; background:green;}
            #blue {width:100px; height:100px; background:blue; float:left;}
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="red"></div>
            <div id="green"></div>
        </div>
        <div id="blue"></div>
    </body>
</html>

但我想知道如果不添加其他HTML元素我是否可以实现我所追求的目标。

提前致谢！

Answer 1

您可以使用float属性使元素并排显示。

更新：你可以通过相对定位来达到这个效果，请参阅下面的演示和代码。

演示： http://jsfiddle.net/SO_AMK/Frf6w/90/

<强> HTML：

<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>

<强> CSS：

#red {
    width: 100px;
    height: 50px;
    background: red;
}

#green {
    width: 100px;
    height: 50px;
    background: green;

    float: left;
    clear: both;
}

#blue {
    width: 100px;
    height: 100px;
    background: blue;

    top: -50px;
    float: left;
    position: relative;
}

Answer 2

使用

style="float:left"

这样做，是否会使div在占据垂直空间之前占据相同的空间

Answer 3

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#red {width:100px; height:50px; background:red;}
#parent {float: left; }
#green {width:100px; height:50px; background:green;}
#blue {width:100px; height:100px; background:blue; float: left;}
</style>
</head>
<body>
<div id="parent">
<div id="red"></div>
<div id="green"></div>
</div>
<div id="blue"></div>
</body>
</html>

编辑：

对它做了一些改动。事情是：如果你想要红色和绿色在彼此之下你有点必须把它们放到另一个分区并漂浮在它旁边的另一个分区。你能解释为什么没有父母你会想要它吗？

Answer 4

将float:left;添加到您的所有div。

Answer 5

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body
{
    max-width:200px;
    margin:auto;    
}
#red {width:100px; height:50px; background:red; **float:left;**}
#green {width:100px; height:50px; background:green;**float:left;**}
#blue {width:100px; height:100px; background:blue;**float:right;**}
</style>
</head>
<body>
    <div id="blue"></div>
    <div id="red"></div>
    <div id="green"></div>
</body>
</html>

我已经改变了体型，以包含我认为你所追求的安排中的3个div。

有很多不同的方法，但这是我要去的方法。（尽管这并不意味着它更好）

希望有所帮助：）

Answer 6

在蓝色div上使用以下代码：

style="float:left"

将两个DIV放在另一个DIV旁边

6 个答案: