div嵌套的div溢出时换行

最新推荐文章于 2024-01-29 11:09:57 发布

nospeak

最新推荐文章于 2024-01-29 11:09:57 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/nospeak/article/details/84179799

版权


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