將兩個div對齊到一個

-1

我正在爲某人制作一個網站，而且我對我的html/css感到生疏，而且我真的需要在本網站上進行側面導航。將兩個div對齊到一個

我有側邊欄（#menu），那麼我想在#menu的左側放置兩個div（#container頂部的#slider）。

我該怎麼做？代碼如下，你可能也想知道，#slider是一個圖片滑塊我在網上得到：

<style type="text/css"> 
body {font-family: Arial; background-color: #eeeeee; background-image: url(Images/bg.png); background-position: bottom; background-repeat: repeat-x; height: 100%; background-attachment: fixed; color: #333333;} 
div#menu {float:left;margin-left: 25%; margin-right:25%; font-size: 40px; padding-top: 10px; padding-bottom: 10px; width: 10%; border: 1px solid #cccccc; text-align: center; word-spacing: 15px; background-color: #ffffff; margin-top: 10px;} 
div#container {padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; margin-left: 25%; margin-right: 25%; width: 40%; border: 1px solid #cccccc; text-align: left; background-color: #ffffff; margin-top: 10px;} 
a {color: #666666; text-decoration:none;} 
a:hover {color: #333333; text-decoration: underline;} 
ul, li {list-style-type: none;} 
#slider {width:600px;height:300px; margin-left: 25%; margin-right: 25%; margin-top: 10px;} 
div.navBulletsWrapper {display:none;} 
</style> 

</head> 

<body> 

<div id="menu"> 
<li><a href="index.htm">Home</a></li> 
<Br> 
<li><a href="about.htm">About</a></li> 
<br> 
<li><a href="products.htm">Products</a></li> 
<Br> 
<li><a href="news.htm">News</a></li> 
<br> 
<li><a href="contact.htm">Contact</a></div></li> 

<div id="slider"> 
     <img src="1.jpg" /> 
     <img src="2.jpg" /> 
     <img src="3.jpg" /> 
    </div> 

<div id="container"> 
Placeholder text. 
</div>

來源

2014-02-09 user3290287

你想要緊急幫助嗎？..最好使小提琴:) – Rex

首先清理你的HTML。如果您不確定要修復什麼，請通過W3C驗證程序運行它。 http://validator.w3.org/#validate_by_input

你想在菜單中的滑塊和容器？如果是這樣，你已經很快關閉了你的第一個div。此外，我不確定您的利潤率會以百分比的形式呈現您期望的體驗。

請對您的問題更具體些，並修正您的標記。

來源

2014-02-09 18:30:41 BR89

對不起，我的意思是我想滑塊和容器在菜單的左側！ – user3290287

修復你最後一次:)

Contact

– BR89

我沒有看到任何錯誤，它有什麼問題嗎？ – user3290287

讓我們暫時忘記您的非驗證html，儘管有很多可以說。

您的主要問題是缺少結構，如果它們位於普通div內，則會更容易將滑塊和容器對齊。您的代碼應該是這樣的（示意圖）：

<div id="menu"> 
    <ul> 
    <li><a href="index.htm">Home</a></li> 
    <li><a href="about.htm">About</a></li> 
    <li><a href="products.htm">Products</a></li> 
    <li><a href="news.htm">News</a></li> 
    <li><a href="contact.htm">Contact</a></li> 
    </ul> 
</div> 
<div id="main"> 
    <div id="slider"> 
    <img src="1.jpg" /> 
    <img src="2.jpg" /> 
    <img src="3.jpg" /> 
    </div> 
    <div id="container"> 
    Placeholder text. 
    </div> 
</div>

這樣的話，你可以浮動#menu和#main如你所願（右或左）。

對於代碼中的其他問題，總是將li包裝在ul或ol中，並且從不使用br來創建垂直空間，更喜歡使用margin或padding。 Html僅用於文檔結構，CSS負責可視化部分。

來源

2014-02-09 22:56:47 Stentor

將兩個div對齊到一個

回答

相關問題