1223849716 发表于 2018-5-20 15:57:24

为什么我一个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>
       

1223849716 发表于 2018-5-20 15:57:55

图片上传不了- {:10_266:}-

635788779 发表于 2018-5-20 16:52:19

<div class="sousuokuang"      这里少了">"   其他没问题可以同排显示

不二如是 发表于 2018-5-21 09:44:55


鱼油代码:
<!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]
查看完整版本: 为什么我一个div里面三个div不能在同一排显示,我加了浮动标签呀,来个小哥哥教一下啊