Question

我正试图让div留在另一个div的一边。我的主要部分位于页面的中心。我希望另一个div留在一边。 http://jsfiddle.net/vgd9yr5s/1/

<body>
<div id="Home">
    <img src="Home.png" alt="Main div">
</div>
<div id="Left">
    <img src="Left.png" alt="Left div">
</div>

body {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding: 0px;
    margin: 0px;
    background: #000000;
}
#Home {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -128px;
    margin-left: -128px;
    width: 256px;
    height: 256px;
}

这是我走了多远。对不起新手问题。

Answer 1

如果您想保持绝对定位，可以对第二个div使用相同的设置并设置margin-left: 0。

#Left {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -128px;
    margin-left: 0;
    width: 256px;
    height: 256px;
}

小提琴：http://jsfiddle.net/vgd9yr5s/5/

Answer 2

使用float:left CSS属性。这是一个简单的示例页面：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>Example Page</title>
        <style>div {float:left; background:yellow; margin:3px;}</style>
    </head>
    <body>
        <div>Hello, World!</div>
        <div>Spam, Spam, wonderful spam...</div>
    </body>
</html>

Answer 3

http://jsfiddle.net/vgd9yr5s/4/ / 你可以看到图片。我希望左图保持在居中的附近。 /

body {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding: 0px;
    margin: 0px;
    background: #000000;
}
#Home {
    position: relative;
    float:right;

    width: 256px;
    height: 256px;
}
#left{
 position:relative;
  float:left;


}

这是你想要达到的目标吗？

如何让div留在另一个div的旁边？

3 个答案: