2つのフレキシブルなdivを隣り合わせに配置

フレキシブルな2つのdivが隣にあるウェブページを作成しようとしています。そのため、ブラウザのウィンドウが一緒に圧縮されると、各divはブラウザの幅（特定のポイントまで）で縮小されます。問題は私が持っている問題は、ブラウザのウィンドウが十分に小さくなったときに、divが縮小せず、代わりにラインがちょうどそれらの間で折れることです。 ..それが何であるか分かりません：2つのフレキシブルなdivを隣り合わせに配置

<html> 
<body> 

<div style="border-style:solid;border-color:green;max-width:100%;overflow: hidden;"> 
    <div style="float:left;border-style:solid;border-color:red;background-color:transparent;padding:15px 30px 0px 30px;min-width:100px;max-width:100%">This is a sample text to fill the space so that it can be looked at in a realistic way.</div> 
    <div style="overflow: hidden;float:right;border-style:solid;border-color:yellow;min-width:100px;max-width:100%;max-height:100%;">This is a sample text to fill the space so that it can be looked at in a realistic way.</div> 
</div> 

<body> 
</html>

出典

2012-05-13 rockit

これにはCSS display:table-cellプロパティを使用できます。このように書く：この

.parent{ 
    display:table; 
    width:100%; 
} 
.parent > div{ 
    display:table-cell; 
    min-width:100px; 
    background:red; 
} 
.parent > .right{ 
    background:green; 
}

チェック：http://jsfiddle.net/Ld3r6/

出典

2012-05-13 11:52:51 sandeep

おかげで、それは働きました！表示：テーブルの外側、表示：テーブル：左の内側のセル、浮きを削除すると問題が解決しました – rockit

またはこの

<style> 
.col  {width: 45%; float:left; border: solid 1px #ccc; margin: 0 10px 0 0;} 
.container {width: 80%; margin: 0 auto; } 
.clear {clear: both} 
</style> 
<body> 

    <div class="container"> 
<div class="col">This is a sample text to fill the space so that it can be looked at in a realistic way.</div> 
    <div class="col">This is a sample text to fill the space so that it can be looked at in a realistic way.</div> 
    <div class="clear"></div> 
    </div>

出典

2012-05-13 11:58:54 NickP

2つのフレキシブルなdivを隣り合わせに配置

答えて

関連する問題