1

私は今cssを学んでいるので、どんな問題が私の心を吹き飛ばそうとしているのか知っているかもしれません.hahaha

わかりました、次のように Web を 2 つの 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>

これを読んでくれてありがとう。私は自分でこれを修正しようとします。いくつかの助けが得られます

4

3 に答える 3

3

Bootstrap が提供するスパン クラスを使用する必要があります。このようなものはどうですか？

<html>
<head>
   .....
</head>
<body>
   <div class="row-fluid">
       <div class="span3">
          <!-- left side -->
       </div>
       <div class="span9">
          <!-- right side -->
       </div>
    </div>
</body>
</html>
于 2013-03-28T19:13:17.313 に答える
1

おそらく相対位置は必要ありません。通常、その最適な使用法は、何かをその中に絶対に配置する必要がある場合です。つまり、相対と呼んでいるボックスに対して相対的です。

このようにフロートを使用するには、幅を設定する必要があり、100% に設定することはできません。そうすることは、コンテナと同じくらいのスペースを占めていることを意味します。この場合、コンテナは画面全体のように見えます。つまり、右の div は左の div の隣に収まらないため、左の div の下に折り返されます。左を幅100px、右を幅500pxなどに設定することから始めて、そこから遊んでください。

そして、指摘されたように、左の float:left を作成します。

于 2013-03-28T19:14:15.947 に答える
0

float: left;左側に追加します。したがって、t 要素は左に移動します。

于 2013-03-28T19:14:00.103 に答える