同一个行的3个DIV的自动适应宽度排版问题！急。。。。
3个同一固定宽度行的DIV能不能实左边的DIV根据填充文字内容自动适应宽度，右边DVI宽度固定的，中间的DVI把乘余宽度自动适应填满，在中间的DIV中填充文字后多出部分会...
3个同一固定宽度行的DIV 能不能实左边的DIV根据填充文字内容自动适应宽度，右边DVI宽度固定的，中间的DVI把乘余宽度自动适应填满，在中间的DIV中填充文字后多出部分会自动隐藏。
效果就是一个书籍目录一样（如下）
第一章.........................1
第二章.........................2
第十五章......................3 展开
效果就是一个书籍目录一样（如下）
第一章.........................1
第二章.........................2
第十五章......................3 展开
1个回答
展开全部
<!DOCTYPE Html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<title>SS Production Provade</title>
<script type="text/javascript" src ="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style type="text/css">
.mian{margin: auto;
margin-top: 100px;
width: 800px;
height: 100px;
}
.num_1,.num_2{float: left;}
.num_2{max-width:none;overflow: hidden;height: 50px}
.num_3{width: 70px;float:right;height: 50px}
.empty{width: 800px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var s = $(".num_1").css("width");
var p = 800 - 70 - Number(s.substring(0,s.length-2));
$(".num_2").css("max-width",p);
});
</script>
</head>
<body>
<div class="mian">
<div class="num_1"><p>this demo is provaded by ss production</p></div>
<div class="num_2"><div class="empty"><p>.........................................................</p></div></div>
<div class="num_3"><p>1</p></div>
</div>
</body>
</html>
希望有帮到您
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
