1

私は、divタグがあり、そのdivタグ内に1つずつ複数のdivタグがあり、その中にすべてのdivタグにもいくつかのdivタグがあるhtmlページを開発しています。

例えば

<div>
     <div class=wrap>
           <div class="child" style="width:30%"></div>
           <div class="child" style="width:30%"></div>   
           <div class="child" style="width:40%"></div>
    </div>

    <div class=wrap>
           <div class="child" style="width:10%"></div>
           <div class="child" style="width:50%"></div>   
           <div class="child" style="width:40%"></div>
    </div>


     <div class=wrap>
           <div class="child" style="width:70%"></div>
           <div class="child" style="width:30%"></div>   

    </div>


    <div class=wrap>
            <div class="child" style="width:100%"></div>
    </div>


    <div class=wrap>

           <div class="child" style="width:80%"></div>
           <div class="child" style="width:10%"></div>   
           <div class="child" style="width:10%"></div>

    </div>

</div>

私の期待する結果は 

|------30------|------30------|---------40----------|
|--10--|---------40---------|----------50-----------|
|-----------------70-----------------|------30------|
|------------------------100------------------------|
|-------------------80----------------|--10--|--10--|

しかし、私が得た実際の結果

|------30------|------30------|
---------40----------|
|--10--|---------40---------|
----------50-----------|
|-----------------70-----------------|
------30------|
|------------------------100------------------------|
|-------------------80----------------|--10--|
--10--|

つまり、親divタグの100％の領域を占める場合、子divタグはオーバーフローして新しい行になりますが、そのdivタグを水平にします（同じ親divに属している場合）

divタグのoverflowプロパティをoverflow：hiddenとして使用しようとしましたが、オーバーフローする可能性のある次のdivタグが非表示になります

以下は私のcssクラスのCSSコードです。

.child
{
 float:left;
height:50px;
position: relative;
 overflow: hidden;
 border-bottom:1px solid #46464f;
border-right:1px solid #46464f;

}

.wrap {
    height: 50px;
    width: 100%;

    border-top: 1px solid #46464f;
    border-left: 1px solid #46464f;
}

助けてください...

4

3 に答える 3

3

uが境界線を定義するかbox-sizing 、.child クラスで定義するようになりました lefttop

あなたの子供 withがこれを計算するよりも50%+1 

.child{
box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
}

ライブデモ

ボックスサイズの詳細

于 2012-11-27T06:50:40.000 に答える
2

左と右の境界線はそれぞれ合計幅に 1 ピクセルを追加します。.wrapこれは要素にとってはそれほど大きな問題ではありませんが、.child要素ごとに 1 ピクセルの余分な幅があるため、すべてが 1 行に収まりません。

outline子要素がどこにあるかを示すために（幅を追加しない）を使用したレイアウトは次のとおりです： http://jsfiddle.net/tWESq/

左右の境界線を削除する必要があります。回避策として、各要素に別の内部 div を追加.childし、代わりに境界線を設定する必要がある場合があります。プロパティを使用できる場合、box-sizingそれも解決策になります。

于 2012-11-27T06:50:40.777 に答える
0

いくつかの div の間にスペースがあると思います。このようにすべてのスペースを削除してみてください

<div class="child" style="width:30%"></div><div class="child" style="width:30%"></div><div class="child" style="width:40%"></div>

または多分それが原因です

border-right:1px solid #46464f;

削除してみてください。

于 2012-11-27T06:49:17.390 に答える