jquery - 右 float div元素未水平显示，请换行

动态添加的div元素不会水平显示在具有特定宽度值的容器div元素中，始终会换行。

这是我的代码

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>

最佳答案

1）删除float:right

2）在#main div上设置direction:rtl

3）您可能还希望将overflow:auto设置为#main div，以查看其他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>