右浮动div元素未水平显示，请换行

Question

Dynamically added div element not show horizontally into a container div element which has a specific width value, always break into new line.

Here is my code

 var i=1; $(document).ready(function () { $("#add").click(function(){ $('#container').append( $('<div/>') .addClass("dDiv") .text("(hello world "+i+")") ); i++; }); }) 

 #main{ float:right; width:500px; border: 1px solid; overflow:hidden; white-space: nowrap; display: block; } .dDiv{ display: inline-block; float:right; background-color:#ff0000; margin:2px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div id="add">Add</div> <div id="chat" style="float:right"> <div id="main"> <div id="container" style="float:right;"> </div> </div> </div> 

Answer 1

Simply remove the float: right declaration for .dDiv . The trick is that all floated elements will automatically be declared as block level elements . If you want to force no line break (therefore an overflow), you will have to treat them as inline or inline-block level elements.

To force .dDiv to honour its inline-block status, simply do not assign a float property to it.

 var i=1; $(document).ready(function () { $("#add").click(function(){ $('#container').prepend( $('<div/>') .addClass("dDiv") .text("(hello world "+i+")") ); i++; }); }); 

 #chat { float: right; } #main{ width:500px; border: 1px solid; overflow: hidden; } #container { overflow:hidden; white-space: nowrap; text-align: right; } .dDiv{ background-color:#ff0000; display: inline-block; margin:2px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div id="add">Add</div> <div id="chat"> <div id="main"> <div id="container"> </div> </div> </div> 

Answer 2

Here are the changes you need to make:

#main {
  text-align: right;
  direction: rtl;
  /* white-space: no-wrap; /* take this out */
}

.dDiv {
   /* float: right /* take this out */
}

Results:

 var i=1; $(document).ready(function () { $("#add").click(function(){ $('#container').append( $('<div/>') .addClass("dDiv") .text("(hello world "+i+")") ); i++; }); }) 

 #main{ float:right; direction:rtl; text-align: right; width:500px; border: 1px solid; overflow:hidden; display: block; } .dDiv{ display: inline-block; background-color:#ff0000; margin:2px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div id="add">Add</div> <div id="chat" style="float:right"> <div id="main"> <div id="container" style="float:right;"> </div> </div> </div> 

Answer 3

1) remove float:right

2) set direction:rtl on the #main div

3) You may want to set overflow:auto to the #main div as well is order to see the additional dDivs

 var i = 1; $(document).ready(function() { $("#add").click(function() { $('#container').append( $('<div/>') .addClass("dDiv") .text("(hello world " + i + ")") ); i++; }); }) 

 #main { width: 500px; border: 1px solid; overflow: hidden; white-space: nowrap; display: block; direction: rtl; } .dDiv { display: inline-block; background-color: #ff0000; margin: 2px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div id="add">Add</div> <div id="chat" style="float:right"> <div id="main"> <div id="container" style="float:right;"> </div> </div> </div>