CSS左側和右側

Question

我現在正在學習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%;
}

兩者都有相對的立場，因為我讀過它們應該，也許我錯了......

只是為了給你一些上下文，左側是導航欄，右側是所有網格和主要內容。

我正在使用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; 到左邊。 所以，thet元素向左移動。

CSS左側和右側

問題描述

3 個解決方案

解決方案1
3 已采納 2013-03-28 19:13:17

解決方案2
1 2013-03-28 19:14:15

解決方案3
0 2013-03-28 19:14:00

CSS左側和右側

問題描述

3 個解決方案

解決方案1 3 已采納 2013-03-28 19:13:17

解決方案2 1 2013-03-28 19:14:15

解決方案3 0 2013-03-28 19:14:00

解決方案1
3 已采納 2013-03-28 19:13:17

解決方案2
1 2013-03-28 19:14:15

解決方案3
0 2013-03-28 19:14:00