0

私は2つの部門を持っています。1 つは、インラインとして表示する必要があるが展開する必要がある一連のヘッダーです。もう 1 つのメインコンテンツ div には、以下の各ヘッダーの一連の div があります。メイン コンテンツ div の周囲に境界線を配置しましたが、ブラウザーはこの境界線を両方の div の上にレンダリングします。メインコンテンツの div のみに表示されるように境界線を修正する方法と、なぜこれが起こっているのですか? ここに画像の説明を入力

プランカー

コード：

<html>
<head>
    <style type="text/css">
#main {
  width: 80%;
  height: 80%;
}
#headers {
  width: 100%;
  display: block;
}
#main-content {
  border: 1px solid #f00;
}
.header{
  text-align: center;
  float: left;
  display: inline;
  width: 14%;
}
    </style>
</head>
<body>
<div id="main">
    <div id="headers">
        <div class="header">
            Header1
        </div>
        <div class="header">
            Header2
        </div>
        <div class="header">
            Header3
        </div>
        <div class="header">
            Header4
        </div>
        <div class="header">
            Header5
        </div>
        <div class="header">
            Header6
        </div>
        <div class="header">
            Header7
        </div>
    </div>
    <div id="main-content">
        main content
    </div>
</div>
</body>
</html>

アップデート

  1. を入れるdisplay:inline-block;と動きますが、正しいやり方ですか？
  2. 周りに境界線を引くにはどうすればよい#headersですか?
4

2 に答える 2

0

overflow:auto次のように設定(またはoverflow: hidden)する必要があり#headersます。

#headers {
    width: 100%;
    display: block;
    overflow: auto;
    border: 1px solid #f00;
}

このoverflow: autoプロパティにより、#headersはブロック フォーマット コンテキストを確立します。つまり、すべてのフロートが親ブロック内に囲まれ、親ブロックの前後にあるコンテンツの影響を受けません。

境界プロパティは期待どおりに機能します。

于 2013-10-02T10:53:08.813 に答える