1

幅 100% のコンテナーと、左<div>に 100px X 100px の画像があり、右<div>は同じ高さに浮いていますが、テーブル構造を使用せずに残りのスペースを埋めたいと思っています。css要素Flexでこれを行うことができると思いますが、方法を知っている人はいますか?

CSS

#container {
    width:100%;
    height:100px;
}
#image {
    width:100px;
    height:100px;
    float:left;
}
#rightcontent {
    float:right;
}

HTML

<div id="container">
    <div id="image">
    </div>
    <div id="rightcontent">
    </div>
</div>
4

2 に答える 2

2

フローティングせずに、右の要素にオーバーフローを追加するだけです。

#rightcontent {
  overflow: hidden;
}

これにより#rightcontent、残りのスペースが埋められます。値も になる可能性がありますscrollが、オーバーフローするものがないため、実際には問題ではありません。

それは最もクリーンなソリューションです。

http://jsfiddle.net/SW8uE/

于 2013-11-11T09:09:29.630 に答える
2

親要素にCSSdisplay:flex;プロパティを使用します。

ライブデモ

#container {
    width:100%;
    height:100px;
    display: flex; /* NOTE THIS */
    overflow:auto;
}
#image {
    width:100px;
    height:100px;
    background:#faf;
}
#rightcontent {
    background:#cf5;
    width:100%;      /* AND THIS */
}

動作<table>をエミュレートするtableために使用する必要はありません:

ライブデモ

#container{
  height:100px;
  width:100%;
  display:table;  /* NOTE THIS */
}
#container > div{
  display:table-cell; /* AND THIS */
}
#image{
  width:100px;
  background:#faf;
}
#rightcontent{
  background:#cf5;
}

または、単純に背景を親に割り当てることによって:

ライブデモ

#container {
    width:100%;
    height:100px;
    background:#cf5;  /* NOTE THIS */
}
#image {
    width:100px;
    height:100px;
    float:left;
    background:#faf;
}
#rightcontent {

}
于 2013-11-11T09:10:23.030 に答える