-1

我正在尝试将徽标和侧边栏放在一起，但它不起作用。徽标容器需要在顶部居中。侧边栏需要在左上角你能帮我吗？我已经尝试过浮动，没有成功。:(

代码：

<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;
}
4

4 回答 4

2

好的，这就是你必须做的：

  • 您需要从 #logo1 中删除 display:inline-block
  • 而不是只写 margin-top:10px ，你需要使用 margin:0px auto ，或者你可以写 margin:10px auto 。这样，它将使您的#logo1 div居中。
  • 但是要使“div”居中，您需要有另一个容器（div）包装在您的 div 中。这样它就会知道，它必须从哪一侧到哪一侧“居中”。
  • 出于这个原因，您将需要在您的#logo1 div 周围创建另一个 div 或容器，并假设它被称为“正确”（参见下面的代码）。
  • 为了让这个 div/container 在你的侧边栏旁边，它需要有一个与你的侧边栏相同的相对位置。现在，您可以将#sidebar1 和#logo1 都浮动到左侧。
  • 因此，您不必再为侧边栏使用该负边距（删除它）。如果你想使用负边距，在这种情况下你必须使用绝对位置。但是你将不得不重组你的整个#logo1 div，这将创建很多作品。

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

HTML 代码：

<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;
    }
于 2013-06-01T12:15:10.050 回答
0

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

你应该做：

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

CSS

.wrapper{
    position:relative;
    width:818px; /* sidebar width + logo width */
}
  • 换位：相对；定位：绝对为您的徽标和侧边栏 div。
  • top:0;为两个 div添加
  • 添加right:0;侧边栏 div

编辑：

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

  • 将 a 添加margin-left:118px;到徽标 div
  • 将包装的宽度更改为徽标宽度 + 边距徽标 + 侧边栏宽度。
于 2013-06-01T11:41:28.800 回答
0

你想要这个吗？

#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>
于 2013-06-01T11:45:08.590 回答
-1

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

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

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

css

.row{
    float: left;
    width: 50%;
}
于 2013-06-01T11:14:44.807 回答