div嵌套的div溢出时换行

<style>
.nobreak 
{
  word-wrap: break-word; word-break: normal; width:400px;
}
</style>
<div class="nobreak" >
  <div style="float:left;margin:1;padding:0;width:100px;background-color:red;">1</div>
  <div style="float:left;margin:1;padding:0;width:100px;background-color:blue;">2</div>
  <div style="float:left;margin:1;padding:0;width:100px;background-color:green;">3</div>
  <div style="float:left;margin:1;padding:0;width:100px;background-color:black;">4</div>
  <div style="float:left;margin:1;padding:0;width:100px;background-color:yellow;">5</div>
  <div style="float:left;margin:1;padding:0;width:100px;background-color:#2FF8FF;">6</div>
</div>


也可以用以下方法,但以下方法不可设置item的宽与高

<style>
.nobreak 
{
  word-wrap: break-word; word-break: normal; width:400px;
}
</style>
<div class="nobreak" >
  <div style="display:inline;width:100px;background-color:red;">1</div>
  <div style="display:inline;width:100px;background-color:blue;">2</div>
  <div style="display:inline;width:100px;background-color:green;">3</div>
  <div style="display:inline;width:100px;background-color:black;">4</div>
  <div style="display:inline;width:100px;background-color:yellow;">5</div>
  <div style="display:inline;width:100px;background-color:#2FF8FF;">6</div>
</div>

你可能感兴趣的:(div)