5

我对 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>

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

第二个有“thelastgecko”和个人资料文本。

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

4

3 回答 3

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>

让它可行，它至少会告诉你往哪个方向移动，这可能不是最好的方式，但它是我的方式。

于 2013-04-12T21:30:15.767 回答
0

你可以这样做：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-12T21:56:41.397 回答
0

使用浮动将 div 放置在某个位置是一种糟糕的设计方式。这是一种更好的使用方式，例如，flex 布局。但并非所有浏览器都支持此功能（但几乎。如果可以，请选择此选项）。

另一种解决方案是：使用该width选项。当然，您将 html 的任何 div 的宽度设置为固定数字，以百分比为单位。观看此示例 但是，如果您这样做，则必须注意非常大和非常小的屏幕，我认为您将不得不编写与(max-width)和一起使用的替代 css 样式表(min-width)。

还有另一种解决方案：网格布局。它是自 2013 年以来标准的一部分（我认为），但尚未得到很好的支持。但也许在未来。

希望我能帮上忙

于 2017-02-02T20:29:22.437 回答