7

右のdivサイズを固定せずに、左のdivを残りのスペースに埋める方法を教えてもらえますか。

次の例とは正反対のものが必要です。

.left {float: left; border: 1px solid blue;}
.right {overflow: hidden; border: 1px solid blue;}

右側のdivは必要なサイズのみを使用し、左側のdivは残りのすべてのスペースを使用する必要があります。

4

3 に答える 3

16

固定幅の右divをfloat:right;そのままにして、使用可能な全幅を使用できるようにする必要がありますが、右divを固定する必要があるため、最初に配置する必要があります。

HTML：

<div id="parentDiv">
    <div id="rightFixedDiv"></div>
     <div id="leftDynamicDiv></div>
</div>

CSS：

#rightFixedDiv
{
   float:right; 
   border-style:solid; 
   width:100px; 
   height:200px;
}
#leftDynamicDiv
{
   border-style:solid; 
   background-color:blue; 
   overflow:hidden; 
   height:200px;
}

チェックしてください、100pxの固定幅：http： //jsfiddle.net/dkGbd/ 200pxの固定幅：http：//jsfiddle.net/eESTZ/

反対の場合は、最初に左側のdivを配置し、float:left;

実例： http： //jsfiddle.net/UShek/

于 2013-01-26T14:43:24.860 に答える
3

あなたがしなければならないことのほとんどは、あなたがここでしたことのcssとhtmlの順序を逆にすることです。フローティング要素は常に最初である必要があります。

<div class="right">this is the right div</div>
<div class="left">left div</div>

次に、CSSは

.right {
  float: right;
  background: #fef;
}
.left {
  display: block;
  background: #ffe;
}

更新： これがフィドルです

于 2013-01-26T14:34:46.447 に答える
1

最も効率的な方法は、新しいCSS 3メソッドである「display：flex」を使用することだと思います。これを検索して、この素晴らしいディスプレイについて詳しく知ることができます。これで多くのメリットが得られます。;）

于 2016-11-03T08:30:52.703 に答える