我如何在旁边和顶部堆叠div?

use*_*909 5 html css

我对html或css了解不多,但我做了很多;

在此输入图像描述

我想堆叠div,所以它看起来像这样(请原谅糟糕的绘图);

在此输入图像描述

我用谷歌搜索了如何尝试不同的东西,但喜欢/不喜欢的盒子总是最终没有移动或移动到最左边/非常右边.

<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>
Run Code Online (Sandbox Code Playgroud)

这些是我拥有的三个div.第一个有链接[添加/消息等]

第二个有"thelastgecko"和个人资料文本.

而我正在尝试使用最后一个框来表示喜欢/不喜欢,但无论我做什么都行不通.

Har*_*son 2

您通常使用一个“巨大”div,将其宽度设置为低于 1024 像素,以便旧屏幕可以查看它,然后通常将其居中于屏幕中间。然后在那个大 div 里面,你把“添加我 - 给我发消息 - 画廊”和“浮动:左”或“位置:绝对”我更喜欢后者。然后你制作另一个包含“最后一个壁虎”+不喜欢和喜欢的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>
Run Code Online (Sandbox Code Playgroud)

使它可行,它至少会告诉你朝哪个方向移动,这可能不是最好的方法,但这是我的方法。