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

1223849716 · 发表于 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

鱼油代码：

<!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，就会出现看不到的部分。

日常开发，对于特殊要求的小组件用固定宽度，一般常用%百分比的相对宽度。

跳转到最佳答案楼层

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

图片上传不了-

-

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，就会出现看不到的部分。

日常开发，对于特殊要求的小组件用固定宽度，一般常用%百分比的相对宽度。

账号		自动登录	找回密码
密码			立即注册