账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    关于浮动的一个问题
    40
    0

    问题描述

    目前在仿写小米官网，写顶部的时候使用浮动，尝试了很多方法不能把购物车浮动到最右面，求教

    问题出现的环境背景及自己尝试过哪些方法

    先写或者后写购物车的浮动，都没有效果

    相关代码

    // 请把代码文本粘贴到下方（请勿用图片代替代码）

    HTML

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米商城 - 小米 MIX 3、小米 8、红米 6 Pro 、小米电视官方网站</title>
    <link rel="shortcut icon" href="https://www.mi.com/favicon.ico">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <!-- 顶部 -->
    <div class="topbar">
        <!-- 顶部容器 -->
        <div class="container">
            <!-- 导航 -->
            <div class="topbar-nav">
                <a href="#">小米商城</a>
                <a href="#">MIUI</a>
                <a href="#">IoT</a>
                <a href="#">云服务</a>
                <a href="#">金融</a>
                <a href="#">有品</a>
                <a href="#">小爱开放平台</a>
                <a href="#">政企服务</a>
                <a href="#">下载 app</a>
                <a href="#">Select Region</a>
            </div>
            <!-- 导航 Over-->

            <!-- 消息信息 -->
            <div class="topbar-info">
                <a href="#">登录</a>
                <a href="#">注册</a>
                <a href="#">消息通知</a>
            </div>
            <!-- 消息信息 Over-->

            <!-- 购物车 -->
            <div class="topbar-cart">
                <a href="#">购物车（0)</a>
            </div>
            <!-- 购物车 Over-->
        </div>
        <!-- 顶部容器 Over -->
    </div>
    <!-- 顶部  Over-->
</body>

</html>

    CSS

    * {
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
.topbar{
    /* background: #333333; */
    height: 40px;
}
.container{
    width: 1226px;
    /* 居中 */
    margin: 0 auto;
}
.container::before,.container::after{
    content: '';
    display: table;
}
.container::after{
    clear: both;
}
.topbar-nav{
    float: left;
}
.topbar-info,.topbar-cart{
    float:right;
}

    你期待的结果是什么？实际看到的错误信息又是什么？

    可以把购物车浮动到最右边，解决问题的思路，感谢！

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 超越自我的极限↙ 普通会员 1楼

      浮动是指在网页设计中，元素的背景图片或其他元素的位置可以在其所在的位置移动。这种位置的变动可以通过CSS中的position属性实现。

      以下是一个简单的例子：

      ```html

      这是浮动元素的内容

      ```

      在这个例子中，浮动元素的position属性被设置为relative，这使得元素可以浮动在容器中。然后，浮动元素的内容被设置为block，这使得元素不会被布局的元素完全包围。

      如果你想让元素的背景图片和其他元素可以一起浮动，你需要将position属性设置为absolute。然后，你可以在position属性中指定元素的位置和大小，以便它可以在容器中正确地浮动。

      ```html

      这是浮动元素的内容

      浮动元素的描述

      ```

      在这个例子中，浮动元素的position属性被设置为absolute，并且浮动元素的背景图片和浮动元素的描述都设置了position属性。这使得浮动元素可以在容器中正确地浮动，而背景图片和其他元素可以一起浮动。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部