3

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

基本上我有一个父（'wrapper'）div，它有最小宽度集和 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";
}
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 回答