我如何在彼此旁邊堆疊div並在彼此之上？

我對HTML或CSS瞭解不多，但我已經做了很多;我如何在彼此旁邊堆疊div並在彼此之上？

enter image description here

我想堆div的，所以它看起來是這樣的（請原諒壞圖紙）;

enter image description here

我用Google搜索如何和嘗試不同的東西，而是喜歡/不喜歡總是盒最終沒有移動或移動到最左邊/非常正確。

<div style="float:left;width:300px;height:350px;text-align:center;"> 
<div style="float:left;width:500px;height:200px;text-align:center;"> 
<div id="wrapper"> 
<div style="align=center;"> 
<div id="first">1</div> 
<div id="second">2</div>

這些是我有的三個div。第一個有鏈接[添加/消息等]

第二個有「thelastgecko」和配置文件。

我試圖用最後一個盒子來做喜歡/不喜歡的事情，但是不管我做什麼都行不通。

來源

2013-04-12 user2275909

http://stackoverflow.com/questions/1909648/stacking-divs-on-top-of-each-other –

使用'Z-index'此 –

您通常使用一個「巨大」div，將其設置爲1024像素以下，以便舊屏幕可以查看它，然後通常將其居中置於屏幕中間。然後在那個大的div裏面，把「添加 - 給我留言 - 畫廊」添加一個「float：left」或者「position：absolute」我更喜歡後者。然後你再做一個包含「最後一個壁虎」的div +不喜歡&喜歡並居中該div，然後我會做另一個div，或者做一個「float：right」或者「position：absolute; left：'巨大寬度減去這個寬度「。

我確實寫了所有的文字和可讀性，因爲給代碼帶走的不是也教。

但如果你還沒有得到它，這是我的想法：

<html> 
    <head> 
    <style> 
     body{margin:0px;padding:0px;width:100%;height:100%;} 
     #container{width:900px;margin:auto;margin-top:200px;} 
     #add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;} 
     #last_gecko,#holder{margin:auto;width:500px;background-color:#eca;} 
     #likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;} 
     #dislikes{background-color:#cea;} 
     #dislike_text{margin-left:700px;background-color:#eac;} 
    </style> 
    </head> 
    <body> 
    <div id="container"> 
     <div id="add_me">add me<br>message me<br>wuts going on</div> 
     <div id="dislike_text">dislike text</div> 
     <div id="last_gecko"> 
     Last Gecko 
     <div id="holder"> 
      <div id="dislikes">dislikes</div> 
      <div id="likes">likes</div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

製造它可行的，它至少會告訴你在移動什麼方向，這可能不是最好的方式，但這是我的方式。

來源

2013-04-12 21:30:15

沒有用的'顯示：inline-block;'？你不喜歡這個還是你不知道。我認爲這是回答他的問題的關鍵。 – Hydrox24

對不起，先生，但我是外星人！ –

我不能告訴你多長時間了，因爲我已經看到我管理的任何幾十個網站的分析中有一個1024像素的顯示器......這些日子或更小的任何東西都是移動的。誠然，無論如何，我建立的寬度大約爲1000px，但如果你爲1024的舊屏幕提供理由，你最好還是適應IE6;無論如何，這兩者在網絡使用中所佔的比例可以忽略不計（在美國）。 – Mike

你可以做這樣的事情：http://jsfiddle.net/jAKgd/

CSS

 #wrapper { 
      width: 800px; 
     } 
     #leftColumn { 
      float: left; 
      height: 800px; 
      width: 200px; 
      margin-right: 5px; 
     } 
     #leftColumn a { 
      display: block; 
     } 
     #rightColumn { 
      width: 100%; 
     } 
     #contentDislike, 
     #contentLike { 
      display: inline-block; 
      width: 250px; 
     }

顯然高度/寬度是可以改變的，以滿足您的需求。我只是做一個快速的例子。

HTML

<div id="wrapper"> 
    <div id="leftColumn"> <a href="#">Link</a> 
    <a href="#">Link</a> 
    <a href="#">Link</a> 
    <a href="#">Link</a> 
    <a href="#">Link</a> 
    </div> 
    <div id="rightColumn"> 
    <div id="contentTop"> 
     <img src="/images/image_name.jpg" alt="image text here" /> 
     <p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p> 
    </div> 
    <div> 
     <div id="contentDislike">DISLIKE CONTENT HERE</div> 
     <div id="contentLike">LIKE CONTENT HERE</div> 
    </div> 
    <div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div> 
    </div> 
</div>

來源

2013-04-12 21:56:41 Biotox

這是設計的一個糟糕的方式使用花車在一些地方到另一個地方的div。這是一個更好的方式來使用，例如，一個靈活的佈局。但是這並不是所有的瀏覽器都支持（但差不多，如果可以的話，請選擇這個選項）。

另一種解決方案是：使用width選項。當然，您將html的任何div的寬度設置爲一個固定的數字，百分比。Watch this example 但是，如果你這樣做，你將不得不關注非常大和非常小的屏幕，我認爲你將不得不編寫與(max-width)和(min-width)一起工作的替代css樣式表。

還有另一種解決方案：gridlayout。這是自2013年以來的標準（我認爲）的一部分，但尚未得到很好的支持。但也許在將來。

希望我能幫助

來源

2017-02-02 20:29:22 Asqiir

我如何在彼此旁邊堆疊div並在彼此之上？

回答

相關問題