为什么我一个div里面三个div不能在同一排显示,我加了浮动标签呀,来个小哥哥教一下啊
css里面:.daohanglan{width: 1226px;height: 100px;border:1px solid #000;margin: 0 auto;
}
.tupian{
width: 55px;height: 55px;border:1px solid #000;float: left;
}
.xiaomishouji{
width: 850px;height: 100px;border:1px solid #000;float: left;
}
.sousuokuang{
width: 296.6px;height:50px;border:1px solid #000;float:right;
}
页面代码:<div class="daohanglan">
<div class="tupian">
</div>
<div class="xiaomishouji">
</div>
<div class="sousuokuang"
</div>
</div>
图片上传不了- {:10_266:}- <div class="sousuokuang" 这里少了">" 其他没问题可以同排显示
鱼油代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.daohanglan{
width: 1226px;height: 100px;border:1px solid #000;margin: 0 auto;
}
.tupian{
width: 55px;height: 55px;border:1px solid #000;float: left;
}
.xiaomishouji{
width: 850px;height: 100px;border:1px solid #000;float: left;
}
.sousuokuang{
width: 296.6px;height:50px;border:1px solid #000;float:right;
}
</style>
</head>
<body>
<div class="daohanglan">
<div class="tupian">
</div>
<div class="xiaomishouji">
</div>
<div class="sousuokuang">
</div>
</div>
</body>
</html>
效果:
小问题:
分析:
鱼油要做一个1226px宽的导航栏,里面有图片(55px)、小米手机(850px)、搜索框(296.6px)三个部分,都是固定宽度。
在正确输入代码后(补上那个>),默认是可以看到三个块级元素在同一行显示的。
固定宽度的div,会带来一些问题,例如用户浏览器屏幕尺寸小于1226px,就会出现看不到的部分。
日常开发,对于特殊要求的小组件用固定宽度,一般常用%百分比的相对宽度。
页:
[1]