鱼C论坛

 找回密码
 立即注册
查看: 3683|回复: 3

[已解决]为什么我一个div里面三个div不能在同一排显示,我加了浮动标签呀,来个小哥哥教一下啊

[复制链接]
发表于 2018-5-20 15:57:24 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
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>
       
最佳答案
2018-5-21 09:44:55

鱼油代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .daohanglan{
  8.             width: 1226px;height: 100px;border:1px solid #000;margin: 0 auto;
  9.         }
  10.         .tupian{
  11.             width: 55px;height: 55px;border:1px solid #000;float: left;
  12.         }
  13.         .xiaomishouji{
  14.             width: 850px;height: 100px;border:1px solid #000;float: left;
  15.         }
  16.         .sousuokuang{
  17.             width: 296.6px;height:50px;border:1px solid #000;float:right;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. <div class="daohanglan">
  23.     <div class="tupian">

  24.     </div>
  25.     <div class="xiaomishouji">

  26.     </div>

  27.     <div class="sousuokuang">

  28. </div>

  29. </div>
  30. </body>
  31. </html>
复制代码


效果:
Snip20180521_1.png


小问题:
Snip20180521_2.png


分析:
鱼油要做一个1226px宽的导航栏,里面有图片(55px)、小米手机(850px)、搜索框(296.6px)三个部分,都是固定宽度。

在正确输入代码后(补上那个>),默认是可以看到三个块级元素在同一行显示的。

固定宽度的div,会带来一些问题,例如用户浏览器屏幕尺寸小于1226px,就会出现看不到的部分。

日常开发,对于特殊要求的小组件用固定宽度,一般常用%百分比的相对宽度。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2018-5-20 15:57:55 | 显示全部楼层
图片上传不了- -
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-5-20 16:52:19 | 显示全部楼层
<div class="sousuokuang"      这里少了">"   其他没问题  可以同排显示
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-5-21 09:44:55 | 显示全部楼层    本楼为最佳答案   

鱼油代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .daohanglan{
  8.             width: 1226px;height: 100px;border:1px solid #000;margin: 0 auto;
  9.         }
  10.         .tupian{
  11.             width: 55px;height: 55px;border:1px solid #000;float: left;
  12.         }
  13.         .xiaomishouji{
  14.             width: 850px;height: 100px;border:1px solid #000;float: left;
  15.         }
  16.         .sousuokuang{
  17.             width: 296.6px;height:50px;border:1px solid #000;float:right;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. <div class="daohanglan">
  23.     <div class="tupian">

  24.     </div>
  25.     <div class="xiaomishouji">

  26.     </div>

  27.     <div class="sousuokuang">

  28. </div>

  29. </div>
  30. </body>
  31. </html>
复制代码


效果:
Snip20180521_1.png


小问题:
Snip20180521_2.png


分析:
鱼油要做一个1226px宽的导航栏,里面有图片(55px)、小米手机(850px)、搜索框(296.6px)三个部分,都是固定宽度。

在正确输入代码后(补上那个>),默认是可以看到三个块级元素在同一行显示的。

固定宽度的div,会带来一些问题,例如用户浏览器屏幕尺寸小于1226px,就会出现看不到的部分。

日常开发,对于特殊要求的小组件用固定宽度,一般常用%百分比的相对宽度。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 02:43

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表