Question

我正在尝试将徽标和侧边栏放在彼此旁边，但它无法正常工作。徽标容器需要在顶部居中。侧边栏需要在左上角你能帮帮我吗？我已经试过漂浮，没有成功。：（

代码：

<body>
    <center>
        <div id="logo1">
            <div id="logo2"></div>
        </div>
    </center>

    <div id="sidebar1">
        <a href="https://test.com/" target="blank">
            <div id="test1"></div>
        </a>
    </div>

</body>

CSS：

#test1 {
display: inline-block;
position: absolute;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/2.png');
height: 45px;
width: 45px;
}

#test1:hover {
    display: inline-block;
    position: absolute;
    border: 1px solid;
    margin-top: 15px;
    margin-left: 22px;
    background-image:url('Afbeeldingen/1.png');
    height: 45px;
    width: 45px;
}

#sidebar1 {
    display: inline-block;
    position: relative;
    border: 1px solid;
    margin-top: -10px;
    margin-left: -15px;
    background-image:url('Afbeeldingen/lol.png');
    height: 1080px;
    width: 118px;
}

#logo1 {
    display: inline-block;
    position: relative;
    border: 1px solid;
    margin-top: 10px;
    height: 100px;
    width: 700px;
}

Answer 1

好的，这就是你要做的事情：

您需要从＃logo1
而不只是写margin-top：10px，你需要使用margin：0px auto，或者你可以写保证金：10px auto。这样，它将以＃logo1 div为中心。
但要以“div”为中心，你需要在div中包含另一个容器（div）。因此，它将知道哪一方面必须“居中”。
因此，您需要在＃logo1 div周围创建另一个div或容器，并假设它被称为“正确”（请参阅下面的代码）。
并且要将此div /容器放在侧边栏旁边，它需要具有与侧边栏相同的相对位置。现在，你可以将你的＃sidebar1和你的＃logo1浮动到左边。
因此，您不必再使用该边栏的负边距（删除它）。如果要使用负边距，则必须在此情况下使用绝对位置。但是你必须重组整个＃logo1 div，这将创造很多作品。

这是供您参考的完整代码：

HTML code：

<div id="container">
    <div id="sidebar1">
        <a href="https://test.com/" target="blank">
            <div id="test1">This is sidebar</div>
        </a>
    </div>
    <div id="right">
        <div id="logo1">
            <div id="logo2"><This is logo</div>
        </div>   
    </div>
</div>

并使用此CSS：

        #container{
    width:1000px;
    height:1080px;
    position:absolute;
    border:1px solid #000;
    }

    #test1 {
    display: inline-block;
    position: relative;
    border: 1px solid;
    margin-top: 15px;
    margin-left: 22px;
    background-image:url('Afbeeldingen/2.png');
    height: 45px;
    width: 45px;
    }

    #test1:hover {
        display: inline-block;
        position: relative;
        border: 1px solid;
        margin-top: 15px;
        margin-left: 22px;
        background-image:url('Afbeeldingen/1.png');
        height: 45px;
        width: 45px;
    }

    #sidebar1 {
        display: inline-block;
        position:relative;
        float:left;
        border: 1px solid;
        background-image:url('Afbeeldingen/lol.png');
        height: 1080px;
        width: 118px;
        border:1px solid red;
    }

    #right{
       position:relative;
       float:left;
       margin-top:0px;
       width:870px;
       height:100px;
    }

    #logo1 {
        position:relative;
        border: 1px solid;
        margin: 0px auto;
        height: 100px;
        width: 700px;
    }

Answer 2

我认为这是你想要的？ http://jsfiddle.net/Le6PH/

你应该这样做：

删除负边距（如果您不知道自己在做什么，请不要使用负边距）
删除<center>标记（此标记自EVER以来已弃用）
删除徽标的边距
在整个结构周围添加包装div
将以下CSS添加到该div

CSS

.wrapper{
    position:relative;
    width:818px; /* sidebar width + logo width */
}

改变立场：相对;定位：绝对适用于您的徽标和sidebar divs。
为两个div添加top:0;
为侧边栏div添加right:0;

修改

使用居中的徽标，就像这样（http://jsfiddle.net/Le6PH/1/），您需要更改两件事：

将margin-left:118px;添加到徽标div

将包装纸的宽度更改为徽标宽度+边距徽标+侧边栏宽度。

Answer 3

你想要this吗？

#test1 {
  border: 1px solid;
  margin-top: 15px;
  margin-left: 22px;
  background-image:url('Afbeeldingen/2.png');
  height: 45px;
  width: 45px;
}

#test1:hover {
  background-image:url('Afbeeldingen/1.png');
}

#sidebar1 {
  position:absolute;
  border: 1px solid;
  background-image:url('Afbeeldingen/lol.png');
  height: 1080px;
  width: 118px;
}

#logo1 {

  border: 1px solid;
  margin-top: 10px;
  height: 100px;
  width: 700px;
}

<div id="sidebar1">
    <a href="https://test.com/" target="blank">
        <div id="test1"></div>
    </a>
</div> 
<div id="logo1">
        <div id="logo2"></div>
</div>

Answer 4

尝试浮动你的div，看起来应该是这样的..

<div class="row">
 <div id="log"></div>
</div>

<div class="row">
 <div id="sidebar"></div>
</div>

CSS

.row{
    float: left;
    width: 50%;
}

2个岔彼此相邻

4 个答案: