3

HTML+CSS で、最初の 15%、2 番目の 70%、3 番目の 15% の 3 つの列を作成したいと考えています。問題は、私のコードでは、ウィンドウのサイズを変更すると 3 番目の列が折り返されることです。私は自分のウェブサイト用にそのような CSS を書きました:

.maincont {
      margin-left: 0px;
      margin-right: 0px;
      width: 100%;
    }

.lcol,
.rcol,
.content {
      display: inline;
      float: left;
      position: relative;
      margin-left: 10px;
      margin-right: 10px;
    }

.lcol {
      width: 15%;
      background-color: red;
    }

.rcol {
      width: 15%;
      background-color: green;
    }

.content {
      width: 70%;
      background-color: blue;
    }

HTML コード:

<body>

  <div class="maincont">
    <div class="lcol">
    </div>
    <div class="content">
    </div>
    <div class="rcol">
    </div>
  </div>

</body>

私は何を間違っていますか？前もって感謝します。

4

3 に答える 3

5

@Maccathは絶対に正しいです。ただし、数値を変更する代わりに、これを CSS ファイルの先頭に追加することをお勧めします。

* { 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
  }

IE8 よりも新しいすべてのサポート - 幅と高さにパディングが組み込まれます。また、代わりに CSS のマージン番号をパディングに変更すると、目的の結果が得られます。

于 2012-11-15T12:22:03.797 に答える
3

.content の余白が問題です。余白がコンテンツ全体の幅に追加されているため、合計で 100% の幅を 20 ピクセル超えているため、列が強制的に折り返されます。

代わりに、.content にパーセンテージ マージンを使用することをお勧めします。.content の幅をたとえば 66% に減らしてから、余白を ... 0.66% に設定します (相対的なので奇妙な計算です)。ただし、これには、ブラウザー ウィンドウの幅に基づいて、列間のギャップが一定にならないという欠点があります。

于 2012-11-15T12:12:27.837 に答える
1

削除する

margin-left: 10px;
margin-right: 10px;

divのサイズと要約のサイズを変更します 100％以上です

于 2012-11-15T12:16:11.300 に答える