divネストdivオーバーフロー時改行
1788 ワード
<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>