CSS 左侧和右侧答案

【问题标题】：CSS Left-side and Right-sideCSS 左侧和右侧
【发布时间】：2013-07-19 06:03:19
【问题描述】：

我现在正在学习 css，所以你可能知道什么样的问题让我大吃一惊……哈哈哈

好的，我正在尝试将我的网络分成两个 div，如下所示：

其目的是让右侧意识到他的左侧有东西。

左侧：

.left-side {
  background: url('../img/mesh.png') #333;
  position: relative; 
  top: 0px;
  margin-left:0px;
  width: 100px;
  height: 100%;
}

右侧：问题出在这里

.right-side {
  position: relative;
  margin-left: 100px;
  top: 0px;
  float: left; /* Trying to detect something at my left */
  height: 100%;
  width: 100%;
}

两者都有相对位置，因为我读过它们应该，也许我错了......

只是为了给您一些上下文，左侧是导航栏，右侧是所有网格和主要内容。

我正在使用引导框架在右侧创建网格，但问题是所有 div 都不以它们的父级作为参考。

<html>
<head>
   .....
</head>
<body>
   <div class="left-side">
      <!-- Navbar -->
   </div>
   <div class ="right-side">
      <div class ="container-fluid">
         <!-- etc -->
      </div>
   </div>
</body>
</html>

感谢您阅读本文。我会尝试自己解决这个问题，会收到一些帮助

【问题讨论】：

在相对定位的元素上添加top: 0px; 不会做任何事情。你的意思是让他们都成为position: absolute;？（不过，左边的栏必须有一个固定的 [如可以指定为一个单位的数字] 宽度才能工作。）
谢谢，绝对在左侧工作，但右侧呢，我给了它一个左边距，但我认为还有另一种更好的方法..
左边距也可以，但不要与width: 100% 一起使用。（不过，我个人会设置 position: absolute; left: <whatever>; top: 0; right: 0;。）但是如果 Bootstrap 提供了执行此操作的方法（显然它确实提供了），那么请改用这些方法。
谢谢 :) 建设性和直截了当，再次感谢您的耐心等待。

标签： html css twitter-bootstrap

【解决方案1】：

您应该使用 Bootstrap 为您提供的东西，即跨度类。像这样的东西呢？

<html>
<head>
   .....
</head>
<body>
   <div class="row-fluid">
       <div class="span3">
          <!-- left side -->
       </div>
       <div class="span9">
          <!-- right side -->
       </div>
    </div>
</body>
</html>

【讨论】：

谢谢，也许我错了，但是 span9 不会限制像素？对不起，我不知道如何很好地解释自己（不是英语）。我的意思是我想给右边的一切，除了左边的东西。
是的，这就是您使用row-fluid 时的工作方式。试试看，看看是不是你想要的。
谢谢，它的工作哈哈。我将第一个跨度更改为 span1，将第二个跨度更改为 span11。这是正确的？。除此之外，这是一个很大的保持简单愚蠢！ :)
是的，您可以将跨度的大小更改为您想要的任何大小，只要它们加起来为 12。
完成 :) 不会再发生

【解决方案2】：

您可能不需要相对位置。通常最好的用途是当您需要将某些东西绝对定位在其中时 - 即相对于您称为相对的框。

要像这样使用浮动，您需要设置宽度，并且它们不能设置为 100%。这样做意味着它们占用的空间与其容器一样多，在这种情况下，容器看起来就像整个屏幕。这意味着右边的 div 将包裹在左边的下面，因为它不能放在它旁边。首先将左侧设置为 100 像素，将右侧设置为 500 像素，或者类似的东西，然后从那里开始玩。

并让 left float:left 正如所指出的那样。

【讨论】：

【解决方案3】：

将float: left; 添加到左侧。所以，thet 元素向左移动。

【讨论】：

这与width: 100% 不同。没有它，它也不会跨越正确的宽度。