排版中遇到的div和<table>的问题，很难解决啊……
排版中的剧本如图所示，这是<table>实现的，请高手指教，能不能不用<table>，而用其他的div+css达到这种效果啊？（请不要答非所问。菜鸟学习的过程很无奈，请高手尽情指点。）其中用到的样式为：.cell { display: block; font-size: 1em; font-family: 宋体; line-height: 130%; text-align: justify;}.cell2 { display: block; font-size: 1em; font-family: 微软雅黑; line-height: 130%; text-align: justify;}代码如下：<tr valign="top"> <td class="cell2">黄半仙</td> <td class="cell">得学会苦中求乐啊姑娘！我再占一卦，象曰：卦占工师得大木，眼前该着走上路，时来运转多顺当，有事自管放心宽。</td></tr><tr valign="top"> <td class="cell2">姿 涵</td> <td class="cell">第三十四卦，雷天大壮卦。您这是鼓励我不气馁，积极而有所作为，上正下正，标正影直。</td></tr><tr valign="top"> <td class="cell2">黄半仙</td> <td class="cell">对喽！</td></tr><tr valign="top"> <td class="cell2">姥 姥</td> <td class="cell">这不，拇们还商量着，说大家伙要一块儿去瞧瞧袁总去。</td></tr><tr valign="top"> <td class="cell2">姿 涵</td> <td class="cell">别价，不用了姥姥。您去哪儿瞧啊？再则说了，这么多人，弄不好人以为游行上访的呢。</td></tr>
当然是可以的，用简单的浮动就可以解决了。
li{
list-style: none;
margin: 10px 0;
}
.left{
float: left;
margin-right: 20px;
font-weight: bold;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="main">
<ul>
<li>
<div class="left">
<p>姥姥：</p>
</div>
<div class="right">
<p>啊哈！那小妖，吃俺老孙一棒！</p>
</div>
</li>
<li>
<div class="left">
<p>姥姥：</p>
</div>
<div class="right">
<p>啊哈！那小妖，吃俺老孙一棒！</p>
</div>
</li>
<li>
<div class="left">
<p>姥姥：</p>
</div>
<div class="right">
<p>啊哈！那小妖，吃俺老孙一棒！</p>
</div>
</li>
<li>
<div class="left">
<p>姥姥：</p>
</div>
<div class="right">
<p>啊哈！那小妖，吃俺老孙一棒！</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
效果图：
效果不如意啊，比如剧本中有的角色话比较多时(行数大于人物栏的垂直范围)，就会溢出，跑到人物栏。没有达到分列的效果啊……
追答这个也容易解决啊
设置一下宽度就可以了。
效果图：
修改CSS：
<style>li{
list-style: none;
margin: 10px 0;
}
.left{
float: left;
/* margin-right: 20px;*/
font-weight: bold;
width: 10%;
}
.right{
width: 90%;
overflow: auto;
}
</style>
左侧的人名可以设宽度4em，右边的话语栏不能设了宽度不好啊，不一样的视图器或显示器，比如手机、电脑或者什么view之类的，要是定义了宽度，在这些设备上看着的效果就不好了，可能在电脑上看着很美观，在手机或view上就不漂亮了，有留白之类的。怎么办啊？
追答那好吧，改用bootstrap，简单快捷。
先改 head 部份，引入bootstrap：
<head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="
<script src="
<script src="
</head>
再改 css :
<style>li{
list-style: none;
}
.left{
font-weight: bold;
}
.right{
overflow: auto;
}
</style>
最后改 div 上的类：
度娘说字数超标了，不过要改的地方也不多，看着图片来就行。
这样可以自适应多种设备
<html>
<head>
<style type="text/css">
h4{
float: left;
margin-right: 10px;
}
p{
float: left;
width: 400px;
}
ul li{
list-style: none;
clear: both;
}
</style>
<title>黄半仙</title>
</head>
<body>
<ul>
<li>
<h4>黄半仙</h4>
<p>得学会苦中求乐啊姑娘！我再占一卦，象曰：卦占工师得大木，眼前该着走上路，时来运转多顺当，有事自管放心宽。</p>
</li>
<li>
<h4>姿 涵</h4>
<p>第三十四卦，雷天大壮卦。您这是鼓励我不气馁，积极而有所作为，上正下正，标正影直。</p>
</li>
</ul>
</body>
</html>追问
真的不想要这个宽度啊width: 400px; 有没办法设置成自动宽度——可视框的宽度（变化的，可拉大拉小）减去4em（左侧人名的宽度），有没有法啊？
追答去学javascript吧，你自述为菜鸟，还想要那么炫酷的效果。拉大拉小html+css可做不到，想自适应就用百分比设置宽度
