2

私はフロートを残して2つのdivを使用している1つのセクションに取り組んでいます。右のdivが表示されていないときに左のdivの幅を広げたい。

これは私がやっていることです:

<style>

    body{
        font-family:Arial, Helvetica, sans-serif; 
        font-size:12px
    }
    .mainContainer{
        width:300px; 
        border:blue solid 1px; 
        overflow:hidden
    }
    .leftCont{
        float:left; 
        border:green solid 1px
    }
    .rightCont{
        float:left; 
        border:red solid 1px
    }

</style>

<div class="mainContainer">
    <div class="leftCont">
        Lorem ipsum dolor sit amet, consectetur 
    </div>
    <div class="rightCont">
        right
    </div>
</div>

これを div/css のみで修正したい。

ありがとう、

4

2 に答える 2

1

気にしない場合は、マークアップを少し変更して、右をdiv左の前に置くことでそれを実現できます。

<div class="rightCont"></div>
<div class="leftCont"></div>

次に、あなたdiv.rightContを右に浮かせてから、左に浮かせてオーバーフローさせます。

.leftCont{
  overflow: hidden;
  border: green solid 1px
}
.rightCont{
  float: right;
  border: red solid 1px
}
于 2013-04-15T12:22:31.767 に答える