小白蛋挞 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 怎么获取下面的： glove_word2id.json和 glove_numpy.npy 这两个文件
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler
  • ¥15 oracle集群安装出bug