小白蛋挞 2022-04-24 15:54 采纳率: 85%
浏览 52
已结题

css浮动问题，我想让左边的盒子左浮动，右边的盒子右浮动，但是为什么盒子没有贴着左边，而是在接着在上一个浮动盒子的末尾，右边的浮动的盒子另起了一行来显示？

img


我想要的是下面这种，但是为什么是接着上一个的结尾来显示的呢

img


 <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?e3lgy6');
            src: url('fonts/icomoon.eot?e3lgy6#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?e3lgy6') format('truetype'), url('fonts/icomoon.woff?e3lgy6') format('woff'), url('fonts/icomoon.svg?e3lgy6#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        * {
            padding: 0;
            margin: 0;
        }
        
        .w {
            width: 1200px;
            margin: 0 auto;
            background-color: antiquewhite;
        }
        
        a {
            text-decoration: none;
            color: black;
        }
        
        li {
            list-style: none;
        }
         .banner-nav {
            height: 20px;
            margin-top: 20px;
        }
        
        .banner-nav ul li {
            float: left;
            color: #ccc;
        }
        
        .banner-nav ul li:nth-child(-n+3)::after {
            content: '';
            font-family: 'icomoon';
        }
        /* .content {
            height: 600px;
        } */
        .content .iphone {
            float: left;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            margin-top: 5px;
        }
        
        .content .message {
            float: right;
        }
    </style>
<body>
 <div class="banner-nav w">
        <ul>
            <li>
                <a href="#">手机、数码、通讯</a>
            </li>
            <li>
                <a href="#">手机</a>
            </li>
            <li>
                <a href="#">Apple苹果</a>
            </li>
            <li>
                <a href="#">iphone 6S Plus系统</a>
            </li>
        </ul>
    </div>
    <div class="content w">
        <div class="iphone"></div>
        <div class="message">
            <h3>wwwqqqqqqqqqqqqqqqqqqqqq</h3>
        </div>
    </div>
</body>
  • 写回答

1条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-04-24 16:06
    关注

    w类名没有设置高度
    可以给w加个overflow: hidden; 触发BFC，你可以了解下清除浮动和BFC

    .w {
                width: 1200px;
                margin: 0 auto;
                overflow: hidden;
                background-color: antiquewhite;
            }
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 5月2日
  • 已采纳回答 4月24日
  • 创建了问题 4月24日

悬赏问题

  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是，这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示