Question

很抱歉没有很好解释标题，但我会尽力在这里解释这个问题。对于这个特殊问题，可能有一个非常简单的解决方案，如果我可以这样称呼它，但我只是无法用css来解决它。

基本上我有一个父（'wrapper'）div，它有min-width设置和2个浮动子节点。当我创建一个动态页面时，用户可以点击“正确”浮动div，当他点击它时，新内容将被添加到该div中。

如果用户想要在向div添加内容后调整浏览器大小，则会出现问题。因为当用户尝试减小浏览器宽度（调整浏览器大小）时，主包装器的宽度将增加（当用户添加内容时），“正确”浮动div将转到新行。所以我的问题是：有没有办法（css）禁止div移动到新行？

以下是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";
}

Answer 1

<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>

Answer 2

尝试从#right

中删除float:right;

#right{
    background-color:blue;
}

右浮动div和min-width，div移动到浏览器调整大小的新行

2 个答案: