-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 またはコンテナーを作成する必要があり、それが "right" と呼ばれていると仮定します (以下のコードを参照)。
  • この div/コンテナをサイドバーのすぐ横に配置するには、サイドバーと同じ相対位置にする必要があります。これで、#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

これが欲しいですか？

#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 に答える