タイトルがよく説明されていないので申し訳ありませんが、ここで問題を説明するために最善を尽くします。この特定の問題をそのように呼び出すことができれば、おそらく非常に簡単な解決策がありますが、cssだけを使用してそれを理解することはできません。
基本的に、最小幅が設定された親('wrapper')divと2つのfloat子があります。動的ページを作成しているときに、ユーザーは「右」のフロートdivをクリックできるようになり、クリックすると、そのdiv内に新しいコンテンツが追加されます。
ユーザーがコンテンツをdivに追加した後、ブラウザーのサイズを変更したい場合に問題が発生します。ユーザーがブラウザの幅を縮小しようとすると(ユーザーがコンテンツを追加すると)メインラッパーの幅が拡大するため(ブラウザのサイズを変更)、「右」のfloatdivは新しい行に移動します。だから私の質問は:divが新しい行に移動するのを無効にする方法(css)はありますか?
jsfiddleへのリンクは次のとおりです:http://jsfiddle.net/LKgbx/30/
HTML:
<div id="wrapper">
<div id="left">I'm left</div>
<div onclick="changeText()" id="right">I'm right</div>
</div>
CSS:
#wrapper{
min-width:400px;
background-color:#A3F8A9;
display:inline-block;
}
#left{
float:left;
width:300px;
background-color:red;
}
#right{
float:right;
background-color:blue;
}
JS:
function changeText(){
document.getElementById('right').innerHTML="Just adding some text to make div longer";
}