3

タイトルが示すように、2 つの div を水平方向に 1 行に配置したいと考えていました。左側の div は固定幅 (画像を含む) ですが、右側の div は残りのスペースを占める必要があります。

CSS:

.container{
  width:100%;
  background-color:#000000;
  height:auto;
}

.inner_left{
  width:150px;
  float:left;
  height:250px;
  background-color:#FF0000;
}

.inner_right{
  float:left;
  height:250px;
  width:78%;
}

HTML :

  <div class="container">
    <div class="inner_left">test</div>
    <div class="inner_right">Nam a congue risus. Mauris mattis facilisis nisi, eget convallis enim lobortis a. Curabitur non neque nec augue commodo ullamcorper sit amet et lorem! Proin tristique vitae lacus ut consectetur. In at convallis dolor, in laoreet dolor. Etiam in molestie enim! Nunc tincidunt pharetra magna, et sollicitudin enim sodales sed. Morbi pretium sollicitudin lorem, bibendum molestie libero consectetur eu. Nunc aliquet eros purus, vel ultricies sem volutpat quis. Fusce nisi ligula; venenatis tristique turpis sit amet, semper adipiscing ante. Aliquam in justo fermentum, interdum nulla vestibulum, ornare augue.

      </div>    
  </div>

私が試したこと：

http://jsbin.com/arIPIHe/2/

http://jsbin.com/arIPIHe/3/

ブラウザの解像度を変更しない限り、2 番目のリンクは正しく機能します。ブラウザーの幅を狭くするとすぐに、右側の div が左側の div の下の次の行に移動します。

作品にある要素を使用して jsbin デモを作成しました。メインのビンは非常に大きく、その中に多くの要素が含まれているため、ビンを作成しました。

スタックだけでなくGoogleでも検索して、次のリンクを取得しましたが、同じことを試してみましたが、それ自体は役に立ちません。

  1. 2 つの div を並べて配置する方法で、左の 1 つが収まるようにサイズ設定され、もう 1 つが残りのスペースを占めますか?

  2. 2 つの div、一方は固定幅、もう一方は残り

右側の div を配置して、常に左側の div の隣に残り、残りの幅も占有するようにするにはどうすればよいですか。私はこれについて頭を悩ませることができません。

4

1 に答える 1

10

CodePen デモ

CSS 位置を使用する

CSS

*{
  margin:0;
  padding:0;  
}

.wrapper{
    margin-top:10px;

    position :relative;
    width: 100%;
    margin: 0px auto;
    height:250px;
}
.inner_left {
  position : absolute;
  top:0;
  left:0;
  bottom:0;
  background: orange;
  width: 250px;


}
.inner_right{
  position :absolute;
  top:0;
  right:0;
  bottom:0;
  left:250px;  
  background:blue; 
}

これは、この回答と同じ問題です: 2 つの div が並んでおり、1 つは Google マップ、もう 1 つは固定幅です。

于 2013-11-22T09:05:08.697 に答える