6-8在div内添加文字，文字完全显示在div下方，且点击上一张报错

jsfy.js:91 Uncaught TypeError: wrap.triggerHander is not a function

部分代码在评论区，谢谢啦

body{

margin: 0;

padding:0;

}

.clearfix:after{

content:' ';

display: block;

height:0;

line-height: 0;

clear: both;

zoom:1;

}

a{text-decoration: none;}

.wrap{

width:1000px;

margin: 0 auto;

position: relative;

}

.top{

height:30px;

background-color: #f5f5f5;

line-height: 30px;

font-size: 13px;

color:#868686;

}

.top .call{

float:left;

padding-left: 20px;

background: url('../图片素材/icon-call.png') no-repeat center left;

}

.top a{

color:#2da5e1;

padding-left: 10px;

}

.top .welcome{

float:right;

}

margin:0;

padding: 0;

display: inline-block;

}

.header{

height:92px;

}

.header .logo{

width:402px;

height:74px;

padding: 9px 0;

display: inline-block;;

}

.header .logo img{

width:100%;

height:100%;

}

.header .search{

width:326px;

height:38px;

position: absolute;

right: 0px;

top:29px;

background-color: orange;

}

/*搜索*/

.ui-search{

background: url(../图片素材/ui-search.jpg) center no-repeat;

font-size: 14px;

color:#fff;

}

.ui-search-selected{

width:70px;

height:38px;

line-height: 38px;

position: absolute;

left:0;

top:0;

text-indent: 14px;

}

.ui-search-select-list{

display: none;

position: absolute;

width:67px;

line-height: 24px;

background-color: #fff;

box-shadow: 3px 3px 5px rgba(0,0,0,.2)

left:2px;

top:36px;

z-index: 2;

}

.ui-search-select-list a{

display: block;

color: #a5a2a2;

text-align: center;

}

.ui-search-select-list a:hover{

background-color: #ebeef5;

}

.ui-search-input{

width:212px;

height:30px;

position: absolute;

left:70px;

top:1px;

line-height: 26px;

border: none;

font-size: 13px;

color:#a5a2a2;

}

.ui-search-submit{

display: block;

position: absolute;

right:0;

top:1px;

width:40px;

height:36px;

}

.nav{

height: 36px;

background-color: #60bff2;

position: relative;

}

.nav .link{

display: block;

float: left;

padding-left: 30px;

line-height: 36px;

color: white;

font-size: 16px;

min-width: 80px;

text-align: center;

}

.nav .right{

position: absolute;

right:0;

}

.nav a:hover{

color:#d7f3ff;

}

.banner{

width:1000px;

margin:30px auto;

height: 260px;

background-color: #f7f7f7;

}

.banner-top{

height:50px;

line-height: 50px;

margin:auto 25px;

}

.banner-top .p1{

font-size: 15px;

}

.banner-top .p2{

margin-left:12px;

font-size: 10px;

color:#f29600;

}

.banner-top .p{

margin-left: 485px;

font-size: 12px;

}

.banner-top .p3{

font-size: 12px;

}

.banner-top .p4{

color: #0000ff;

}

.banner-bottom{

margin:auto 25px;

position: relative;

}

.banner1{

margin-top: 13px;

width: 200px;

height: 150px;

}

.banner2{

position: absolute;

top:10px;

left:230px;

color:#888888;

font-size: 10px;

width: 450px;

height: 170px;

line-height: 25px;

}

.banner2 p{display: block;

}

.banner2 p .span{

margin-right: 12px;

display: inline-block;

width: 15px;

height:18px;

background: url(../图片素材/icon-web.png) no-repeat;

}

.banner2 .s2 .span{

background-position:0 -19px;

}

.banner2 .s3 .span{

background-position:0 -42px;

}

.banner2 .s4 .span{

background-position:0 -64px;

position: relative;

}

.sp{

display:inline-block;

position:absolute;

}

.banner3{

position: absolute;

top:0;

right:0;

width: 250px;

height: 165px;

}

.content-top{

height: 50px;

}

.item{

color: #00b3ec;

font-size: 13px;

height:20px;

margin-top:30px;

}

.content-top .link{

color:black;

line-height: 38px;

width:110px;

height:38px;

font-size: 16px;

}

.left,.rightt{width:38px;

border-left:1px solid #dcdddd;

border-right:1px solid #dcdddd;

}

.left{

position: absolute;

z-index: 3;

}

.left .t1{

height: 89px;

line-height: 89px;

background-color: #f2F8ff;

}

.q1{height: 40px;

border: 1px solid #dcdddd;

}

.q2{height: 38px;

border: 1px solid #dcdddd;

}

.t2{height: 91px;

border: 1px solid #dcdddd;

}

.t3{height:268px;

border-bottom: 1px solid #dcdddd;

background-color: #f2F8ff;}

.t4{border-bottom: 1px solid #dcdddd;}

.rightt{position: absolute;

left:670px;

z-index: 3;}

.item1{

width: 670px;

height: 370px;

position:relative;

overflow: hidden;

}

.content-left{

width:99999px;

height: 310px;

position:absolute;

left:40px;

right:0;

transition: all .5s;

}

.slide{

display: inline-block;

float:left;

width: 630px;

height: 310px;

}

.slide div{

float: left;

border: 1px solid #dcdddd;

text-align: center;

line-height: 90px;

font-size: 10px;

}

.slide .c1{

height:38px;

}

.slide .c2{

height:88px;

}

.slide .sl{

width: 38px;

border-top: 1px solid white;

border-bottom: 1px solid white;

}

.slide .sl2{

width: 88px;

}

.q1{

background: url('../图片素材/icon-scheduling-left.jpg');

}

.q2{

background: url('../图片素材/icon-scheduling-right.jpg');

}

.we{

text-align: center;

line-height: 40px;

}

.we2{color:#4ab4ed;

background-color: #e0eefd;

}

.content-right{

position: absolute;

top:43px;

right: 0;

width: 280px;

height:270px;

overflow: auto;

}

.content-right .mm{

color: #606060;

font-size: 12px;

}

.content-right .nn{

color: #888888;

font-size: 12px;

}

.footer{

height:70px;

line-height: 70px;

text-align: center;

font-size: 12px;

color:#666;

padding:25px 0;

background-color: #eceef2;

}

慕妹6345022 2018-01-20

源自：实战：挂号平台首页 6-7 总结与预告

收起

4回答

卡布琦诺 2018-01-21 15:08:23

1、将content-left里面的内容整体在嵌套一个div

2、设置新嵌套的div的盒子宽度。要宽一些，然后设置slide左浮动，设置content-left超出隐藏

3、设置footer清楚浮动

希望可以帮到你~

收起回答

提问者慕妹6345022 #1

谢谢，我当时幻灯片还没做，现在做了，发现文字还是显示在应插入的div下方

2018-01-21 17:37:44
提问者慕妹6345022 #2

已把代码修改成新的，两个问题还是存在，而且我最开始问的是文字为什么完全显示在下一个div中。。。

2018-01-21 20:20:00
卡布琦诺回复提问者慕妹6345022 #3

你要说明白你的指的“文字还是显示在应插入的div下方”具体是哪里的。是页面中那一块的文字在应插入的div下方。

2018-01-22 09:33:26

提问者慕妹6345022 2018-01-20 22:49:21

//搜索

$.fn.UiSearch=function(){

var ui=$(this);

$('.ui-search-selected',ui).on('click',function(){

$('.ui-search-select-list').show();

return false;

});

$('.ui-search-select-list a',ui).on('click',function(){

$('.ui-search-selected').text($(this).text());

$('.ui-search-select-list').hide();

return false;

})

$('body').on('click',function(){

$('.ui-search-select-list').hide();

})

}

$(document).ready(function(){

var myDate=new Date();

var y=myDate.getFullYear();

var m=myDate.getMonth()+1;

var d=myDate.getDate();

var w=myDate.getDay();

switch (w)

{

case 0:

x="星期日";

break;

case 1:

x="星期一";

break;

case 2:

x="星期二";

break;

case 3:

x="星期三";

break;

case 4:

x="星期四";

break;

case 5:

x="星期五";

break;

case 6:

x="星期六";

break;

}

var now=y+"年"+m+"月"+d+"日";

$('.c1').html(x);

$('.c1').html(y+"年"+m+"月"+(d+1)+"日");

})

//ui-slidder

$.fn.UiSlider=function(){

var ui=$(this);

var wrap=$('.content-left');

var items=$('.slide',ui);

var btn_prev=$('.q1',ui);

var btn_next=$('.q2',ui);

var current=0;

var size=items.size();

var width=items.eq(0).width();

//具体操作

wrap.on('move_to',function(evt,index){

wrap.css('left',index*width*(-1));

console.log(index);

})

wrap.on('move_prev',function(){

if(current<=0)

{current=size;}

current=current-1;

wrap.triggerHander('move_to',current);

})

.on('move_next',function(){

})

btn_prev.on('click',function(){

wrap.triggerHander('move_prev');

});

btn_next.on('click',function(){

wrap.triggerHander('move_next');

});

}

//页面的脚本逻辑

$(function(){

$('.ui-search').UiSearch();

$('.content').UiSlider();

});

收起回答

提问者慕妹6345022 2018-01-20 22:48:36

</div>

</div>

</div>

</div>

<div>

</div>

<div>

</div>

<div>

<span class="nn">下午14:00停止次日预约挂号（周五14:00后停挂至下周一）</span>

</div>

<span class="nn">就诊前一工作日14:00前取消</span>

<div>

</div>

</div>

</body>

</html>

收起回答

提问者慕妹6345022 2018-01-20 22:45:22

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p class="welcome">欢迎来到城市医院挂号统一平台 

请 

</p>

</div>

</div>

</div>

<a href="#" class="link">按医院挂号</a>

<a href="#" class="link">按科室挂号</a>

<a href="#" class="link">按疾病挂号</a>

<a href="#" class="link right">社会知名医院</a>

</div>

<span class="p1">北京协和医院</span>

<span class="p3 p5">中国医科院所属医院</span>

</div>

</div>

<span class="span"></span>[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓胡同40号

</p>

<span class="span"></span>http://www.pumch.cn/

</p>

<span class="span"></span>东院咨询台：010-69155564；西院咨询台：010-69158010

</p>

<span class="span"></span><span class="sp">东院：106，108,110,111,116,684,685到东单路口北；41,104，块814到东单路口南；1,52,728,802到东单路口西；20,25,37,39到东单路口东；<br/>

103,104,420,803到新东安市场；地铁1/5号线到东单。西院：68到辟才胡同东口；更多乘车路线详见须知

</span>

</p>

</div>

</div>

<a href="javascript:void(0)" class="link ">科室排班表</a>

<a href="dzy.html" class=" item">返回科室列表</a>

</div>

</div>

</div>

</div>

收起回答

相似问题

div的文字问题

2-10作业题GALLERY区思路

为什么图片float之后文字不会位于图片下面

div中文字没有自动换行

请问如何设置密码框才能使框里的提示文字显示完整呢

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36713 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

6-8在div内添加文字，文字完全显示在div下方，且点击上一张报错

6-8在div内添加文字，文字完全显示在div下方，且点击上一张报错

正在回答回答被采纳积分+1

请选择置顶位置