右浮动div和min-width，div在浏览器调整大小时移至新行 [英] right floated div and min-width, div moves to the new line on browser resize

问题描述

很抱歉，标题不清楚，但是我会尽力在这里解释问题。
如果我可以这样称呼，也许可以很容易地解决这个特定问题，但是我只是无法通过仅使用CSS来解决。

基本上，我有一个父（'wrapper'）div，它具有最小宽度设置和2个浮动子级。在创建动态页面时，用户将能够单击右侧浮动div，当他单击它时，新内容将添加到该div中。

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

这是jsfiddle的链接：< a href = http://jsfiddle.net/LKgbx/30/ rel = nofollow> http://jsfiddle.net/LKgbx/30/

HTML：

 < div id = wrapper> 
< div id = left>我离开了< / div> 
< div onclick = changeText（） id = 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 =只是添加一些文本使div更长； 
} 
  

解决方案

 < script type = text / javascript> 
 function changeText（）{
 document.getElementById（'right'）。innerHTML =只是添加一些文本以使div更长; 
} 
< / script> 
< style type = text / css> 
 #wrapper {
 background-color：＃A3F8A9; 
头寸：相对； 
} 
 #left {
 position：absolute; 
还剩0px； 
 width：300px; 
 background-color：red; 
} 
 #right {
 position：absolute; 
还剩：300px； 
宽度：100％； 
 background-color：green; 
} 
< / style> 
 
 
< div id = wrapper> 
< div id = left>我离开了< / div> 
< div onclick = changeText（） id = right>我是对的< / div> 
< / div> 
  

Sorry for not well-explained title, but I will try my best to explain the problem here. There is probably a very easy solution to this particular problem, if i can call it that way, but I just can't figure it out with using only css.

Basically I have a parent ('wrapper') div which has min-width set and 2 floated children. As I am creating a dynamic page, user will be able to click on the 'right' floated div, and when he clicks on it new content will be added inside that div.

Problem occurs if the user wants to resize the browser after adding content to the div. Because the width of the main wrapper will be increased (when user adds content) when user tries to reduce the browser width (resize the browser) the 'right' floated div will go to the new line. So my question is: Is there any way (css) to disable div from moving to the new line?

Here is the link to the 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";
}

解决方案

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

这篇关于右浮动div和min-width，div在浏览器调整大小时移至新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！