首页新闻找找看学习计划

div里面的字超出div怎么如何处理

0
[已解决问题] 解决于 2016-12-10 16:08
<script type="text/javascript">
    $(document).ready(function() {
        $(".flip").click(function() {
            $(".panel").slideToggle("slow");
        });
        $(".flip2").click(function() {
            $(".panel2").slideToggle("slow");
        });
    });
</script>
<style type="text/css">
div.panel, div.flip, div.panel2, div.flip2 {
    margin: 0px;
    padding: 5px;
    text-align: center;
    background: #e5eecc;
    border: solid 1px #c3c3c3;
}
 
div.panel {
    display: none;
}
 
div.panel2 {
    display: none;
}
 
ul li {
    list-style-type: none;
}
</style>
<body>
    <ul>
        <li>
            <div
                style="width: 10%; height: 20px; float: left; text-align: right; overflow: hidden;">例子1</div>
            <div class="flip" style="width: 88%; height: 20px; float: right;">请点击这里</div>
            <div class="panel" style="width: 88%; float: right;">
                <p>W3School - 领先的 Web 技术教程站点</p>
                <p>在 W3School,你可以找到你所需要的所有网站建设教程。</p>
            </div>
        </li>
        <li>
            <div
                style="width: 10%; float: left; text-align: right; overflow: hidden;">例子2</div>
            <div class="flip2" style="width: 88%; float: right;">请点击这里</div>
            <div class="panel2" style="width: 88%; float: right;">
                <p>W3School - 领先的 Web 技术教程站点</p>
                <p>在 W3School,你可以找到你所需要的所有网站建设教程。</p>
            </div>
        </li>
    </ul>
</body>

我想点击然后下滑,这个功能实现了。一开始点击“请点击”的这个div会变长,我下写了高度,div固定了但是里面的字跑到外面去了。列子1和例子2这两个div也是,请问该怎么解决

伊夏丶的主页 伊夏丶 | 初学一级 | 园豆:9
提问于:2016-01-21 10:53
< >
分享
最佳答案
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".flip").click(function() {
            $(".panel").slideToggle("slow");
        });
        $(".flip2").click(function() {
            $(".panel2").slideToggle("slow");
        });
    });
</script>
<style type="text/css">
div.panel, div.flip, div.panel2, div.flip2 {
    margin: 0px;
    padding: 5px;
    text-align: left;
    background: #e5eecc;
    border: solid 1px #c3c3c3;
    overflow: hidden;
    word-wrap: break-word;
}

div.panel {
    display: none;
}

div.panel2 {
    display: none;
}

ul li {
    list-style-type: none;
    clear: both;
}
</style>
<style type="text/css">
span {
    height: 25px;
    width: 25px;
    display: block;
    position: relative;
}

.demoSpan1 {
    height: 20px;
    width: 20px;
    border: 3px #333 solid;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}

.demoSpan1:before {
    content: '';
    height: 15px;
    width: 15px;
    background: #333;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    position: absolute;
    top: 3px;
    left: 3px;
}
</style>

</head>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".flip").click(function() {
            $(".panel").slideToggle("slow");
        });
        $(".flip2").click(function() {
            $(".panel2").slideToggle("slow");
        });
    });
</script>
<style type="text/css">
div.panel, div.flip, div.panel2, div.flip2 {
    margin: 0px;
    padding: 5px;
    text-align: left;
    background: #e5eecc;
    border: solid 1px #c3c3c3;
    overflow: hidden;
    word-wrap: break-word;
}

div.panel {
    display: none;
}

div.panel2 {
    display: none;
}

ul li {
    list-style-type: none;
    clear: both;
}
</style>
<style type="text/css">
span {
    height: 25px;
    width: 25px;
    display: block;
    position: relative;
}

.demoSpan1 {
    height: 20px;
    width: 20px;
    border: 3px #333 solid;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}

.demoSpan1:before {
    content: '';
    height: 15px;
    width: 15px;
    background: #333;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    position: absolute;
    top: 3px;
    left: 3px;
}
</style>

</head>

<body>
    <ul>
        <li>
            <div
                style="width: 10%; height: 20px; float: left; text-align: right; white-space: nowrap; overflow-x: auto">系统派单</div>
            
            <div class="flip"
                style="width: 88%; height: 20px; float: right; white-space: nowrap; overflow-x: auto">系统派单</div>
            <div class="panel"
                style="width: 88%; float: right; white-space: nowrap; overflow-x: auto">
                <p>2016年1月21日 11:54:13 NOC政企派单,系统受理!</p>
            
            </div>
        </li>
        <li>
            <div
                style="width: 10%; float: left; text-align: right; overflow: hidden;">本地网现场处理</div>
            <div class="flip2" style="width: 88%; float: right;">本地网现场处理</div>
            <div class="panel2" style="width: 88%; float: right;">
                <p>2016年1月21日 11:54:59 </p>
                <p>2016年1月21日 11:55:34</p>
            </div>
        </li>
    </ul>
</body>
</html>

伊夏丶 | 初学一级 |园豆:9 | 2016-01-21 15:32
其他回答(2)
0

or

方向给你指出了,自己查找学习一下吧。

[0] | 园豆:1255 (小虾三级) | 2016-01-21 10:56

第二个我用过了 没用 我去看看第一个

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2016-01-21 11:00

第一个也不行

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2016-01-21 11:03

@伊夏丶: 把你整个页面代码贴出来,我想看下效果,还需要自己补充代码。+_+

支持(0) 反对(0) [0] | 园豆:1255 (小虾三级) | 2016-01-21 11:23

@[0]: 我不是贴出来了吗

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2016-01-21 14:06

@伊夏丶: 我还需要自己写头,然后再找个jQuery库。.....

支持(0) 反对(0) [0] | 园豆:1255 (小虾三级) | 2016-01-21 14:11

@[0]:表头在下面

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2016-01-21 15:32
1

这能叫代码?

博雅源 | 园豆:178 (初学一级) | 2016-01-21 15:28

除了少了一个iquery库 别的都一样

支持(0) 反对(0) 伊夏丶 | 园豆:9 (初学一级) | 2016-01-21 15:30
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册