Question

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

哦，我正试图将我的网络分成两个这样的div：

enter image description here

目的是让右方意识到左边有一些东西。

左侧：

.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%;
}

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

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

我正在使用bootstrap框架在右侧创建网格，但问题是所有div都没有将其父级作为参考。

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

感谢您阅读本文。我会尝试通过自己来解决这个问题，一些帮助会得到很好的回复

Answer 1

你应该使用Bootstrap给你的东西，即span类。这样的事情怎么样？

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

Answer 2

你可能不需要相对位置。通常最好的用途是当你需要在它里面放置绝对的东西时 - 也就是说，相对于你称之为亲戚的盒子。

要使用这样的浮动，您需要设置宽度，并且不能将它们设置为100％。这样做意味着他们占用了与容器相同的空间，在这种情况下看起来就像是整个屏幕。这意味着正确的div将在左侧包裹，因为它不适合它。首先将左侧设置为宽度100px，将右侧设置为宽度500px，或者类似的东西，然后从那里进行播放。

让左边的浮动：左边指出。

Answer 3

将float: left;添加到左侧。所以，那个元素就在左边。

CSS左侧和右侧

3 个答案: