排版中遇到的div和<table>的问题，很难解决啊……
排版中的剧本如图所示，这是<table>实现的，请高手指教，能不能不用<table>，而用其他的div+css达到这种效果啊？（请不要答非所问。菜鸟学习的过程很无奈，请高...
排版中的剧本如图所示，这是<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>
展开
3个回答
展开全部
当然是可以的，用简单的浮动就可以解决了。
<style>
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>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML>
<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可做不到，想自适应就用百分比设置宽度
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
那你就摁Shit键呗
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
