1

私はこのHTMLを持っています

.container_1
{
    width: 80%;
    border: 5px solid black;
    overflow: hidden;
}

.container_2
{
    float: left;
    border: 5px solid red;
    width: 100%;                    
}

.container_1
{
    width: 80%;
    border: 5px solid black;
    overflow: hidden;
}

.container_2
{
    float: left;
    border: 5px solid red;
    width: 100%;                    
}

<div class="container_1">
    <div class="container_2">
    Content 1
    </div>
    <div class="container_2">
    Content 2
    </div>    
</div>​

フィドルhttp://jsfiddle.net/uZVnB/3/

問題は、フィドルでわかるように、 .container_1 の境界線が .container_2 の境界線に重なっているということです。したがって、両方のコンテナの境界線が完全であることを示すフォームも同様です。

4

5 に答える 5

4

を削除し floatます。このように書いてください：width.container_2

.container_2
{
    border: 5px solid red;   
}

これをチェックしてくださいhttp://jsfiddle.net/uZVnB/4/

于 2012-07-25T07:11:31.673 に答える
0

あなたはCSS属性を使用してそれを達成することができますbox-sizing:border-box;

デモを見る

CSS：

.container_1 {
    width:80%;
    border:1em solid;
    overflow: hidden;
}

.container_2 {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:100%;
    border:1em solid red;
}
于 2012-07-25T07:16:33.520 に答える
0

IEを念頭に置いて、これが私の解決策です。
境界線は常に 100% 幅よりも大きくなります。

ここに解決策がありますhttp://jsfiddle.net/uZVnB/41/
これが役立つことを願っています

于 2012-07-25T10:28:33.893 に答える
0

の幅を.container_2100% から 98% に変更すると、すべてがうまくいきます。横幅を100%にすると自然に最大まで伸びて境界線が重なります。

于 2012-07-25T07:14:04.017 に答える
0
  1. と を削除するfloat: leftとwidth: 100%、ブロック要素がコンテナーの幅全体を埋めるため、正常に機能します。
  2. スタイルを使用する必要がある場合(フロートが定義どおりに動作しないようにするfloat: leftため、必須ではないと思いますが)、 を使用できますが、最新のブラウザーでのみ機能し、下位バージョンの IE はサポートしていません。このプロパティ。width: 100%box-sizing: border-box
  3. 絶対に配置するために使用することもできますが、スタイルとposition: absolute; left: 0; right: 0;競合しfloat: left、IE6 ではサポートされていません。
于 2012-07-25T07:14:15.610 に答える