0

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

<!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 元素的情况下实现我的目标。

提前致谢！

4

6 回答 6

3

您可以使用 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;
}
于 2012-07-09T15:34:59.437 回答
1

采用

style="float:left"

这是做什么的，它是否使 div 在占用垂直空间之前水平占用尽可能多的空间

于 2012-07-09T15:35:32.717 回答
0 
<!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>

编辑：

对其进行了一些修改。问题是：如果您希望红色和绿色在彼此下方，则您必须将它们放入另一个分区并将另一个分区浮动在其旁边。你能解释一下为什么你会在没有父母的情况下想要它吗？

于 2012-07-09T15:34:33.063 回答
0

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

于 2012-07-09T15:34:33.700 回答
0 
<!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。

有很多不同的方法，但这是我想要的一种。（虽然并不意味着它更好）

希望有帮助:)

于 2012-07-09T15:37:25.207 回答
0

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

style="float:left"
于 2012-07-09T15:48:23.490 回答