问答详情
源自:3-9 企业网站制作之信息展示区制作

请问news course sidebar 三个盒子高度为什么不一致,course盒子低了一点

.main

{

height: 250px;

background-color: #FFF;

margin-top: 5px;

}


.news

{

width: 340px;

border: 1px solid #E8E8E8;

background-color: #9FC;

}


.course

{

width: 410px;

border: 1px solid #E8E8E8;

background-color: #FF6;

margin: 7px;

}


.sidebar

{

width: 230px;

background-color: #09F;

}


.news,.course,.sidebar

{

height: 250px;

float: left;

}      


<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<link rel="stylesheet" type="text/css" href="style.css"  />

<script src="js/setHomeSetFav.js" type="text/javascript" charset="gb2312"></script>

<script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>

<script src="js/mf-pattern/mF_YSlider.js" type="text/javascript"></script>

<link href="js/mf-pattern/mF_YSlider.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

myFocus.set({

id:'picBox'

})

</script>


</head>

<body>

<div class="top">

<div class="top_content">

<ul>

<li><a href="#">联系我们</a></li>

<li><a href="#" onclick="AddFavorite(window.location,Document.title)">加入收藏</a></li>

<li><a href="#" onclick="SetHome(window.location)">设为首页</a></li>

</ul>

</div>

</div><!--top结束-->

<div class="wrap">

<div class="logo">

<div class="logo_left">

<img src="images/logo.jpg" alt="慕课网" />

</div>

<div class="logo_right">

<img src="images/tel.jpg" alt="服务热线" />24小时服务热线:<span class="tel">123-456-7890</span>

</div>

</div><!--logo结束-->

<div class="clear"></div>

<div class="nav">

<div class="nav_left"></div>

<div class="nav_mid">

<div class="nav_mid_left">

<ul>

<li><a href="#">首页</a></li>

<li><a href="list.html">关于慕课</a></li>

<li><a href="list.html">新闻动态</a></li>

<li><a href="list.html">课程中心</a></li>

<li><a href="list.html">在线课程</a></li>

<li><a href="list.html">人才招聘</a></li>

</ul>

</div>

<div class="nav_mid_right">

<form action="" method="post">

<input type="text" class="search_text" />

</form>

</div>

</div><!--nav_mid结束-->

<div class="nav_right"></div>

</div><!--nav结束-->

<div class="ad" id="picBox">

<div class="loading"><img src="images/loading.gif" alt="图片加载中" /></div>

<div class="pic">   <!-- 图片列表外面,必须包裹一个class为pic的div-->

<ul>

<li><img src="images/ad2.jpg" /></li>

<li><img src="images/ad3.jpg" /></li>

<li><img src="images/ad4.jpg" /></li>

</ul>

</div>

</div><!--ad结束-->

<div class="main">

<div class="news">

<div class="title"></div>

<div class=""></div>

<div class=""></div>

</div><!--news结束-->

<div class="course"></div><!--course结束-->

<div class="sidebar"></div><!--sidebar结束-->

</div><!--main结束-->

</div><!--wrap结束-->

</body>

</html>


提问者:慕九州5212368 2019-10-27 11:11

个回答

  • weixin_慕田峪5218236
    2020-04-29 20:18:22

    course的margin值写错了

    应该是margin:0 7px;  你没写上下的间距设为0 直接写7px默认为上下左右均为7px!

  • qq_慕粉0262500
    2019-10-27 18:57:19

    三个盒子的上下位置是不是不一样