我如何在彼此旁边堆叠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并在彼此之上？

回答

相关问题