1、使用tbale封装div为列
2、使用样式float:left;
3、使用样式display:inline;
<html><head> ???<style type="text/css"> ???????.myrow{ ???????????border:#c3c3c3 1px solid; ???????????height:30px; ???????????margin:5px; ???????} ???????????????.myfloat{ ???????????float:left; ???????????margin:2px; ???????} ???????????????.mydisplay{ ???????????display:inline; ???????????margin:2px; ???????} ???????????????.myline{ ???????????border-style:solid; ???????????border-color:#c3c3c3; ???????????border-width:0px 0px 0px 1px; ???????????height:20px; ???????} ???</style></head><body> ???<div id="row1" class="myrow"> ?????<table> ?????<tbody> ?????<tr> ???????<td> ???????????<div> ???????????根因1 ???????????</div> ???????</td> ???????<td> ???????????<div> ???????????</div> ???????</td> ???????<td> ???????????<div> ???????????故障场景1 ???????????</div> ???????</td> ???????<td> ???????????<div> ???????????</div> ???????</td> ?????</tr> ?????</tbody> ?????</table> ???</div> ???????<div id="row2" class="myrow" style="height:30px"> ???????<div class="myfloat"> ???????根因2 ???????</div> ???????<div class="myfloat myline" > ???????</div> ???????<div class="myfloat"> ???????故障场景2 ???????</div> ???????<div class="myfloat"> ???????</div> ???</div> ???????<div id="row3" class="myrow"> ???????<div class="mydisplay"> ???????根因3 ???????</div> ???????<div class="mydisplay"> ???????</div> ???????<div class="mydisplay"> ???????故障场景3 ???????</div> ???????<div class="mydisplay"> ???????</div> ???</div> ???</body></html>css div不换行
原文地址：https://www.cnblogs.com/coshaho/p/8830982.html