zoukankan      html  css  js  c++  java
  • 两个 多个div不换行

    <div style="display:inline;">元素一</div><div style="display:inline;">元素二</div>
    //可以搭配overflow:hidden使用
    

    决方方法1:display:inline,将其变成行级元素,这样2个div就会排在同一行。

    
    <div style="400px;height:300px;?border-1px;border-style:solid;border-color:#FFDEAD;">
    		<div style="background-color:#6495ED;100px;height:100px;display:inline;"></div>
    		<div style="background-color:#C0FF3E;100px;height:100px;display:inline;"></div>
    		<div style="background-color:#8A2BE2;100px;height:100px;display:inline;"></div>
    </div>
     
    
    <div style="700px;height:500px;?border-1px;border-style:solid;border-color:#FFDEAD;">
    		<div style="background-color:#6495ED;100px;height:100px;float:left;"></div>
    		<div style="background-color:#C0FF3E;100px;height:100px;float:left;"></div>
    		<div style="background-color:#C0FF3E;100px;height:100px;float:right;"></div>
    		
    		<!--必须清除浮动,才能换行-->
    		<div style="background-color:#8A2BE2;100px;height:100px;clear:both;"></div>
    </div>
    

    使用inline,2个div之间默认是有缝隙的,不会刚好贴在一起;使用float,会影响后续的div,必须通过clear清除。

    -------------------------------------------------------------------------
    ## 极客时间全网最便宜最优惠购买方式,优惠券返现 百度网盘 微信关注公众号“选门好课”
    扫描下方二维码关注我的公众号"选门好课",与我一起交流知识
  • 相关阅读:
    恰瓜恰到自己家
    在 D 天内送达包裹的能力
    火车编组
    排列小球
    为什么这段时间一直在做算法题呢
    leetcode 221 ,3,480,6,54,46,209,495
    leetcode 684.354,133,207,121,63,64,jz46,120,357
    leetcode 130,200,207,329,491,494,416,547,51
    flink单机搭建以及快速编写一个简单的java job demo运行
    leetcode 437,450,508,513,538,623,652,654,662
  • 原文地址:https://www.cnblogs.com/singworld/p/13533756.html
Copyright © 2011-2022 走看看