2 Divs旁邊海誓山盟

-1

我試圖把一個標誌和一個側邊欄彼此旁邊，但它不會工作。標誌容器需要居中位於頂部。側邊欄需要位於左上角你能幫助我嗎？我已經嘗試過漂浮，沒有成功。 :(2 Divs旁邊海誓山盟

代碼：

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

來源

2013-06-01 user2442686

你有一個鏈接到你的網站？ – NewBoy

標籤已經過時，你應該使用'保證金：auto'相反，你也已經切緣陰性 –

-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-01 11:14:44 NewBoy

沒有更迭，但它仍然看起來像標誌佔據了整個行 – user2442686

你有沒有嘗試申請一個固定的寬度？然後應用margin：0 auto; – NewBoy

嘗試一些像我上面 – NewBoy

我認爲這是你想要的？ http://jsfiddle.net/Le6PH/

你應該這樣做：

取出切緣陰性（如果你不知道你在做什麼，不要用切緣陰性）
取出<center>標記（此標記棄用因爲EVER）
刪除您的標誌的保證金
周圍添加你的整個結構的包裝DIV
添加以下CSS到該分區

CSS

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

改變位置：相對;定位：絕對爲您的徽標&邊欄divs。
添加top:0;兩個div的
側邊欄DIV

編輯添加right:0;：

，居中標誌，像這樣（http://jsfiddle.net/Le6PH/1/），你需要改變兩件事情：

將margin-left:118px;添加到徽標div
將包裝的寬度更改爲徽標寬度+邊距徽標+邊欄寬度。

來源

2013-06-01 11:41:28 user2019515

一個很好的選擇差不多，我只是想爲中心的標誌。 – user2442686

編輯我的回答 – user2019515

你想要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>

來源

2013-06-01 11:45:08 Janak

好吧，這是你必須做的：

您需要刪除顯示：從＃LOGO1
inline-block的而不是隻寫邊距：10px的，你需要使用margin：0px auto，或者你可以寫margin：10px auto。由此，它將以＃logo1格爲中心。
但是爲了居中「div」，你需要有另一個容器（div）包裝在你的div中。這樣它就會知道，從哪一方到哪一方它必須被「居中」。
出於這個原因，你需要創建一個在你＃DIV LOGO1另一格或容器，讓我們假設它被稱爲「權利」（見下面的代碼）。
而這個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-01 12:15:10

請添加一些解釋，讓提問者可以知道他在做什麼錯 – pinkpanther

哦，對不起，我在這裏新。注意到，我已經編輯了我的答案。 –

2 Divs旁邊​​海誓山盟

回答

相關問題

2 Divs旁邊海誓山盟