3

タイトルがよく説明されていないので申し訳ありませんが、ここで問題を説明するために最善を尽くします。この特定の問題をそのように呼び出すことができれば、おそらく非常に簡単な解決策がありますが、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";
}
4

2 に答える 2

3
<script type="text/javascript">
function changeText(){
    document.getElementById('right').innerHTML="Just adding some text to make div longer";
}
</script>
<style type="text/css">
#wrapper{
    background-color:#A3F8A9;
    position:relative;
}
#left{
    position:absolute;
    left:0px;
    width:300px;
    background-color:red;
}
#right{
    position:absolute;
    left:300px;
    width:100%;
    background-color:green;
}
</style>


<div id="wrapper">
     <div id="left">I'm left</div>
     <div onclick="changeText()" id="right">I'm right</div>
 </div>
于 2013-02-22T22:24:48.687 に答える
1

float:right;#rightから削除してみてください

#right{
    background-color:blue;
}
于 2013-02-22T22:24:21.790 に答える