0

フォーラムの投稿レイアウトを作成しようとしているいくつかの基本的な CSS がありますが、機能させることができません。

100% 幅の 1 つの div があり、その下に 2 つのフロートが並んでいます。それらは決して 100% の幅に等しくないように見えるため、適切に整列していません。

同様に、フロートが拡大すると、2 つのフロートの親 div が拡大せず、修正方法がわかりません。

これは私がこれまでに持っているものです:

CSS

.parent{
    width: 100%;
    top: 10px;
    position: relative;
    clear: both;
    color: black;
}
.line{
    height:20px;
    padding-left:10px;
    lineHeight: 20px;
    margin:0px;
    border: 1px solid black;
}
.container{
    width:100%;
    text-align: center;
    border-bottom:1px solid red;
}
.fleft{
    float:left;
    width:10%;
    text-align:left;
    margin:0px;
    padding-left:10px;
    border-right:1px solid black;
}
.fleft2{
    float:left;
    width:86%;
    text-align:left;
    margin:0px;
    padding-left:10px;    
    border-right:1px solid black;
}

HTML:

<div class="parent">

    <div class="line">

        <span style="float:left;">Test</span>
        <span style="float:right;">Test 2</span>

    </div>


    <div class="container">
        <div class="fleft"> Hello </div>
        <div class="fleft2"> Hello Message</div>
    </div>
</div>

JS Fiddle も提供しています:

http://jsfiddle.net/yMaqR/10/

4

1 に答える 1

1

100% 幅の 1 つの div があり、その下に 2 つのフロートが並んでいます。それらは決して 100% の幅に等しくないように見えるため、適切に整列していません。

パディングとマージンを考慮する必要があります。したがって、浮動要素の幅 + パディング + マージンを合計すると、親の幅をオーバーフローすると、ラップされます。したがって、考えられる解決策は、パディングを削除して、おそらく子要素に追加することです。

同様に、フロートが拡大すると、2 つのフロートの親 div が拡大せず、修正方法がわかりません。

解決策は、 clearfixを使用することです

フロートの詳細とその仕組みの理解。

于 2013-06-30T01:44:59.237 に答える