精华内容
下载资源
问答
  • 两个方法相对独立地写,很显然代码量会比较多,因为两个方法功能相似,所以可以想办法调用个方法,将不同的部分当做参数传入,减少代码量。其次,如果数组已经有序,...
  • css--float浮动

    2019-06-17 22:31:00
    前面我们学习了CSS相关的知识,现在试想一下,如果我们想把两个div放在一行显示,该怎么处理?前面也说过,div是块级标签,默认占一行,这时候如果想要达成效果,那就要用到float了 float float中的四个参数 ...

    前戏

    前面我们学习了CSS相关的知识,现在试想一下,如果我们想把两个div放在一行显示,该怎么处理?前面也说过,div是块级标签,默认占一行,这时候如果想要达成效果,那就要用到float了

    float

    float中的四个参数

    float:left      左浮动
    
    float:right     右浮动
    
    float:none      不浮动
    
    float:inherit   继承 

    先来看一下不加float的效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
             *{padding: 0;margin: 0}
            div{height:100px;width:100px;background: red}
         </style>
    </head>
    <body>
            <div>1</div>
            <div>2</div>
    </body>
    </html>
    left
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
             *{padding: 0;margin: 0}
            div{height:100px;width:100px;background: red;
                text-align: center;
             line-height: 100px;}
    
             div{float: left;
                margin-right: 10px;
             }
    
         </style>
    </head>
    <body>
            <div class="c1">1</div>
            <div class="c2">2</div>
    </body>
    </html>
    right
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
             *{padding: 0;margin: 0}
            div{height:100px;width:100px;background: red;
                text-align: center;
             line-height: 100px;}
    
             div{float: right;
                margin-right: 10px;
             }
    
         </style>
    </head>
    <body>
            <div class="c1">1</div>
            <div class="c2">2</div>
    </body>
    </html>

    注意:float:right时,两个div的顺序就反过来了,因为先把c1的浮动到最右边,然后浮动c2

    none
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
             *{padding: 0;margin: 0}
            div{height:100px;width:100px;background: red;
                text-align: center;
             line-height: 100px;}
    
             div{float: none;
                margin-right: 10px;
             }
    
         </style>
    </head>
    <body>
            <div class="c1">1</div>
            <div class="c2">2</div>
    </body>
    </html>

    none就是不浮动,就和默认的div一样的效果

    inherit
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
             *{padding: 0;margin: 0}
            div{height:100px;width:100px;background: red;
                text-align: center;
             line-height: 100px;}
    
             .test{float: right;
                height: 200px;width: 200px;background: green;
             }
             .c1,.c2{
                 float: inherit;
                margin-top:10px; }
    
         </style>
    </head>
    <body>
        <div class="test">
            <div class="c1">1</div>
            <div class="c2">2</div>
        </div>
    </body>
    </html>

    代码解释:

    我们给class为c1和c2的加上了float: inherit;给它的父元素加上了float: right,所以父元素会像右浮动,但是因为c1和c2继承了父元素的浮动,所以也会像右浮动,解释完毕。

    float的副作用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
                .c1,.c2{background: red;float: left;height: 30px;width: 20px;margin-right: 10px}
                .c3{background: green;height: 100px;width: 100px;}
         </style>
    </head>
    <body>
        <div class="test">
            <div class="c1">1</div>
            <div class="c2">2</div>
            <div class="c3"></div>
    
        </div>
    </body>
    </html>

    我们可以看到,上面绿色的框产生了易位,原本是要想绿色的框在红色的下面显示,这就是浮动的副作用之一

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
                .test{border: 1px solid red;}
                .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                    margin-right: 10px}
                .c3{background: green;height: 100px;width: 100px;}
         </style>
    </head>
    <body>
        <div class="test">
            <div class="c1">1</div>
            <div class="c2">2</div>
    <!--        <div class="c3"></div>-->
    
        </div>
    </body>
    </html>

    如果我们给上面的代码没有添加float,则子元素会把父元素的高度撑起来,加上float之后,父元素的高度就成了一条线。这也是float的副作用

    清除浮动的副作用

    清除浮动的副作用有四种方法

    1. 手动给父元素设置高度

    2.通过clear清除内部和外部浮动

    3.给父元素添加overfloat属性并结合zoom:1使用

    4.给父元素添加浮动

     手动给父元素设置高度

    我们先来看一下副作用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
                .test{border: 1px solid red;width:100px;}
                .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                    margin-right: 10px}
         </style>
    </head>
    <body>
        <div class="test">
            <div class="c1">1</div>
            <div class="c2">2</div>
    
        </div>
    </body>
    </html>
    View Code

    给父元素设置高度height:30px;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
                .test{border: 1px solid red;
                    width:100px;
                    height:30px; }
                .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                    margin-right: 10px}
         </style>
    </head>
    <body>
        <div class="test">
            <div class="c1">1</div>
            <div class="c2">2</div>
    
        </div>
    </body>
    </html>

    但是我们想一想,如果子标签有多个,是不是就超过了父元素的高度呢?

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
                .test{border: 1px solid red;
                    width:100px;
                    height:30px; }
                .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                    margin-right: 10px}
         </style>
    </head>
    <body>
        <div class="test">
            <div class="c1">1</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
    
        </div>
    </body>
    </html>
    View Code

    经常测试,发现真是这样的,那我们使用添加overfloat属性并结合zoom来试一下,看能不能解决掉我们的问题

    overflow
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
                .test{border: 1px solid red;
                    width:100px;
                    overflow: hidden;
                    zoom: 1}
                .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                    margin-right: 10px}
         </style>
    </head>
    <body>
        <div class="test">
            <div class="c1">1</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
    
        </div>
    </body>
    </html>

    解释:overflow是将溢出的截取掉

    经过测试发现,完美的解决了我们的问题

    通过clear清除内部和外部浮动

    clear有四个属性

    clear:none
    clear:left    左边不允许有浮动
    clear:right   右边不允许有浮动
    clear:both    左右都不允许有浮动

     

    先来看一下副作用的效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
                .test{border: 1px solid red;
                    width:100px;
                    height:100px; }
                .c1{background: red;float: left;height: 30px;width: 20px;
                    margin-right: 10px}
                .c2{background: green;height:50px;width:30px;}
         </style>
    </head>
    <body>
        <div class="test">
            <div class="c1">1</div>
            <div class="c2">2</div>
    
    
        </div>
    </body>
    </html>
    View Code

    使用clear:left解决副作用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
                .test{border: 1px solid red;
                    width:100px;
                    height:100px; }
                .c1{background: red;float: left;height: 30px;width: 20px;
                    margin-right: 10px}
                .c2{background: green;height:50px;width:30px;
                    clear: left;
                }
         </style>
    </head>
    <body>
        <div class="test">
            <div class="c1">1</div>
            <div class="c2">2</div>
    
    
        </div>
    </body>
    </html>

    其余的三个也是同理,就不做具体的演示

    给父元素添加浮动

    还是先看一下副作用的效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
                .test{border: 1px solid red;
                    width:100px;
                    }
                .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                    margin-right: 10px}
         </style>
    </head>
    <body>
        <div class="test">
            <div class="c1">1</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
    
        </div>
    </body>
    </html>
    View Code

    我们给父元素也加上浮动float:left

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
                .test{border: 1px solid red;
                    width:100px;
                    float: left;
                    }
                .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                    margin-right: 10px}
         </style>
    </head>
    <body>
        <div class="test">
            <div class="c1">1</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
    
        </div>
    </body>
    </html>

    刷新之后,也能解决我们的问题,那给父元素添加一个兄弟元素看看效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
                .test{border: 1px solid red;
                    width:100px;
                    float: left;
                    }
                .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                    margin-right: 10px}
                .c3{height: 100px;width: 100px;background: #4d4d4d}
         </style>
    </head>
    <body>
        <div class="test">
            <div class="c1">1</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
    
        </div>
        <div class="c3">啦啦</div>
    </body>
    </html>

    刷新之后发现,虽然父元素的问题解决了,但是它的兄弟标签有嵌入到了里面,我们可以给兄弟标签加上clear:both解决

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
                .test{border: 1px solid red;
                    width:100px;
                    float: left;
                    }
                .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                    margin-right: 10px}
                .c3{height: 100px;width: 100px;background: #4d4d4d;
                clear: both}
         </style>
    </head>
    <body>
        <div class="test">
            <div class="c1">1</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
            <div class="c2">2</div>
    
        </div>
        <div class="c3">啦啦</div>
    </body>
    </html>
    点我偷看

    小练习

    使用浮动完成以下效果

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
         <style>
             *{padding: 0;margin: 0;}
             .test{background: #ccc;height: 32px;width: 700px;}
             .c2{float: left;margin-right:30px;line-height: 32px;}
             .icon{float: right}
             .d1{float: inherit;margin-left: 30px;line-height: 32px;}
    
         </style>
    </head>
    <body>
        <div class="test">
            <div class="a1">
                <div class="c2">测试</div>
                <div class="c2">开发</div>
                <div class="c2">产品</div>
                <div class="c2">UI</div>
            </div>
    
            <div class="icon">
                <div class="d1">python</div>
                <div class="d1">HTML</div>
                <div class="d1">CSS</div>
                <div class="d1">Js</div>
            </div>
        </div>
    
    </body>
    </html>
    点我偷看

     

    转载于:https://www.cnblogs.com/zouzou-busy/p/11042366.html

    展开全文
  • 如 以上方法都不行,直接将JBOSS分为两个并立容器,或+CACHE/静态页处理,一般实时情不高都是静态化处理,还是连接多的话,只能是限制IP了,1IP只能同时<5连接且每个不高于30应可以减缓了</div> 就...
  • 针对这两个字段做唯一索引; 2.然后web服务器上直接插入,抓特定的Exception判断是不是违反了唯一性。</div> 这个...我看... <br/>问题补充</strong><br/><div class="quote_title">lixjluck ...
  • <p>Vue源码构造实例的过程就一行</p><pre><code>this._init(options)</code></pre>,用你的参数对象去执行init初始化函数。init函数中先进行了大量的参数初始化操作<pre><code>this.xxx = blabla</code></...
  • -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...
  • 两个钩子则会分别在该分组每个测试用例运行前和运行后执行。由于很多代码都需要模拟环境,可以再这些<code>before或<code>beforeEach做这些准备工作,然后在<code>after或<code>afterEach里做回收操作...
  • <div><p><strong>视频链接</strong>:https://youtu.be/j4He7VuVyu4</p> 视频时长 10:05,预计发布时间为北京时间4月16日晚 这是刚哥最新的视频私享链接,方便大家提前添加字幕,文字稿在...
  • <img src="/images/smiles/icon_biggrin.gif"/> <strong>问题补充</strong><br/><div class="quote_title">vipyami 写道</div><div class="quote_div">怎么现在还在做短信营业厅?我们03年就上了,不知道现在还...
  • 如果将内容显示在表格中,内容较多的情况下会出现垂直滚动条,在向下滚动时,表头会被隐藏,这对查看内容非常不便,个解决办法是,采用上下两个放在不同div中的表,上面的专门放表头,下面的显示详细内容。...
  • <p>Vue在两个地方用到了上述nextTick: * Vue.nextTick和Vue.prototype.$nextTick都是直接使用了这个nextTick * 在batcher中,也就是watcher观测到数据变化后执行的是<code>nextTick(flushBatcherQueue)...
  • 你会发现我这两个任务都保持在50毫秒以内的情况下,我可以保证我的总时间是100毫秒以内完成的,这个50毫秒不是我定的,W3C性能工作组有个Longtask规范也对这种情况做了规定。 <p><img alt="图片...
  • 咱家里边吃一定要血沫 洗的干干净净的 你看看特别干净 现在北京做羊蝎子的也不少 它是外来货 羊蝎子是从天津传过来的 对从天津 但是从最早也是从内蒙 咱们现在弄好了啊 您看啊 这儿有几款料 有白芷 由良姜 有...
  • 次装它两个 让它们有伴 稍微捏一下就可以了 0:03:48.521,0:03:52.374 这样鸟儿就不知道里面有梨 它就吃不到了 0:03:53.668,0:03:54.275 这里还有 0:03:54.783,0:03:58.845 大家可以看一下这里上面有2个 这就是...
  • 深入浅出 - Redux

    2021-01-08 14:31:52
    当它被Redux调用的时候会为他传递两个参数<code>State</code> 和 <code>Action。 <p>Reducer会根据 <code>Action</code> 的type来对旧的 <code>State</code> 进行操作。返回新的State。 看起来是下面这样的: ...
  • 两个时间在 React 中相当重要,因此我们需要单独用小节去学习它们。 时间 首先是 <code>currentTime</code>,在 <code>requestCurrentTime</code> 函数内部计算时间的最核心函数是 <code>...
  • 枸杞的由来和技术栈

    2021-01-02 15:11:32
    你甚至仍然能找到一个 1k star 但是临时变量也放在 <code>this.state</code> 里并且直接给 <code>state</code> 赋值的库。好不容易找到一个看起来靠谱的,你又发现它的文档根本没描述清楚它的所有功能ÿ...
  • 上线或测试时提供构建插件一行install命令所有业务模块组合起来变成一完整的项目。具体打包、发布的方式后面会写一篇关于前端工程化的<a href="https://github.com/kuitos/kuitos.github.io/issues/29">blog来...
  • 2016年终总结

    2021-01-08 19:32:57
    仔细研究过Koa的每一行源码以及Koa使用到的依赖(co、koa-compose等),对Koa的实现及原理进行了非常深入的理解,对Koa深入了解后我又研究了Koa2的源码,深入了解他们的不同及各自的特点,...
  • 我们洗个一两次就可以了 0:02:35.208,0:02:36.868 如果这剁椒里面水太多啊 0:02:36.993,0:02:39.478 它这蒸出来就是有股水的味道 0:02:40.177,0:02:41.012 香味就出不来 0:02:42.912,0:02:45.260 好 ...
  • ExtAspNet_v2.3.2_dll

    2010-09-29 14:37:08
    -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...
  • 可以反复卤个两三次没问题这卤水 0:05:23.144,0:05:23.937 好 关火 0:05:24.333,0:05:26.103 好了 现在我们来试一下 0:05:26.362,0:05:29.789 用刀割点下来尝一下味道怎么样 0:05:30.727,0:05:32.910 我给你割...
  • 谈谈面试与面试题

    2021-01-04 04:23:55
    两个词,问及具体行为我得到了五花八门的答案,甚至有看上去经历相当资深的工程师absolute和relative搞混的。 而微博上一些人说"属性可以google搜索"则更离谱,position在CSS布局中是...
  • 想知道究竟怎么把白如羊脂的山药做成红通通、亮晶晶的腐乳和山楂小果吗?您请继续看下去喽! 猜到了吗,这天然色素来自红菜头熬成的汁儿,这红菜头切开变色,得熬至少30分钟,...
  • <div><p>Posted on Jun 3, 2016 - <a href="https://github.com/toddmotto/toddmotto.github.io/blob/master/_posts/2016-06-03-lifecycle-hooks.md">Edit this...这意味着我们需要两个组件,<code>tab和<code>...
  • 待会阿姨就是一个个把它们放在烤箱里 53 00:04:40,275 --> 00:04:42,250 油酥(油和面混合制成) 54 00:04:59,850 --> 00:05:02,625 烤制(进烤箱) 55 00:05:08,700 --> 00:05...
  • 怎么说呢 大家会说来这羊杂店会看到羊杂西施 13 00:00:58,750 --> 00:01:01,700 真的是看了很多的什么什么西施 如油条西施 奶茶西施 14 00:01:01,700 --> 00:01:04,350 这家的西施绝对的名不虚传 15 00:...
  • 其实这里的难点是怎么把js字符串转化为可执行的js代码。 1. 使用<code>eval执行js代码语句,看下面简单的示例: <p><img alt="" src=...
  • <div><p><strong>视频链接</strong>:https://youtu.be/DcpbK5BffQc</p> <p><备注内容,如视频时长、发布日期等等(如果无需备注,请删除此行)> 请翻译以下全部内容 <pre>...

空空如也

空空如也

1 2
收藏数 40
精华内容 16
关键字:

怎么把两个div放在一行