精华内容
下载资源
问答
  • div横向排列

    千次阅读 2019-04-15 20:52:59
    转自:... 仅做个人笔记 所有途径 最佳途径(其他略) 【第一行】 ...给父元素设置display: flex;...通过justify-content属性调整子元素的水平对齐方式: ...2.flex-end:...

    转自:https://blog.csdn.net/zmhawk/article/details/73293366#t2

    仅做个人笔记


    所有途径

    最佳途径(其他略)


    【第一行】

     给父元素设置 display: flex;


    【第二行】

    通过 justify-content 属性调整子元素的水平对齐方式:

    1. flex-start:

        默认

    2. flex-end:

    justify-content: flex-end;

     3. center:

    justify-content: center;

    4. space-around:

    justify-content: space-around;

    5. space-between:

    justify-content: space-between;


    【第三行】

    但是当父元素宽度不够时, flex 默认是不会换行的,而是会等比例压缩,缩放比例 flex-shrink 属性或复合属性 flex 相关。

    等比例压缩

    通过 flex-wrap 属性可以使其换行,该值有三个取值 nowrap、 wrap、 wrap-reverse,默认为 nowrap。

    1. nowrap

    默认,图略。

    2. wrap

    flex-wrap: wrap;

    3. wrap-reverse

    flex-wrap: wrap-reverse;

     

    展开全文
  • 以下面这组 div 为例,group的高度由内容撑开 <div id="group"> <div id="div1">div1</div>...常见的有三种方法可以让div横向排列,分别是flex 弹性盒模型、float 浮动和通过i...

    以下面这组 div 为例,group的高度由内容撑开

    <div id="group">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </div>

    显示结果如下为上下排列

     

     常见的有三种方法可以让div横向排列,分别是flex 弹性盒模型float 浮动  通过inline-block 行块标签等。

    一、flex 弹性盒模型

    flex 弹性盒模型是最简便的方法,也是本人最喜欢用的方法,给父元素设置 display: flex; 即可

    #group{
        display: flex;
    }

    效果图:

                               

     还可以通过 justify-content 属性调整子元素的水平对齐方式:

    #group{
        display: flex;
        justify-content: flex-start;
    }
    • flex-start:默认靠右对齐

               

    •  flex-end:靠左对齐

               

    •  center:水平居中

             

    •  space-around:平均分布(左右有间隔)

              

    • space-between:平均分布(左右无间隔)

             

      当父元素宽度不够时, flex 默认是不会换行的,而是会等比例压缩,缩放比例 flex-shrink 属性或复合属性 flex 相关。

               

      二、float 浮动

     除了用flex 弹性盒模型设置div横向排列,利用float 浮动属性也可设置div横向排列

    代码如下:

    #div1{
        float: left;
    }
    #div2 {
        float: right;
    }
    #div3 {
        float: right;
    }

    显示结果:

               

     float 的特点:

    • 多个 div 右浮动时,顺序会颠倒,请注意看 div2 和 div3,可以通过将它们再用一个 div 包起来,然后对它们设置左浮动,对父 div 设置右浮动来解决。
    • 脱离文档流,若父元素高度由内容撑开,那么就撑不开,从图中可以看到 wrap 没了,因为高度变为了 0,可通过清浮动来解决。
    • 文字会环绕在浮动元素周围,图中未表现出来。
    • 不能换行,图中未表现出来。

    三、inline-block 行块标签

    代码如下:

    #div1, #div2, #div3{
        display: inline-block;
    }

    显示结果:

               

     inline-block 特点: 

     元素间会有空白。这个空白其实是空白符,因为 inline-block 会使元素在行内排列,也就是跟文字在一起排列,而我们源代码中 div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符,所以就会出现缝隙。

    解决方案有:

    1. 通过给父元素设置 font-size: 0; ,使空白符不可见。但会导致子元素中继承的字体大小也为 0,解决方案:

                   a.  可以明确子元素内字体大小的,为其单独设置文字大小。

                    b.  可以使用 rem 作为字体大小单位来继承 HTML 根元素的字体大小属性。

    2. 在源代码里把前一个 div 的结束标签和后一个 div 的开始标签贴在一起。可读性极差,丑拒。

    <div id="wrap">
        <div id="div1">div1
        </div><div id="div2">div2
        </div><div id="div3">div3</div>
    </div>

    展开全文
  • css+div横向排列自动换行 - Kaiqisan

    千次阅读 2020-09-26 12:18:46
    我是Kaiqisan,是一个不善言辞的羞射男孩,在我们使用div+css布局的时候,由于div是块级元素,在排列的时候总是会自动换行。现在有一个需求就是要能自动换行。 <div class="main"> <div class="block">&...

    大家好,都吃了吗?我是Kaiqisan,是一个不善言辞的羞射男孩,在我们使用div+css布局的时候,由于div是块级元素,在排列的时候总是会自动换行。现在有一个需求就是要能自动换行。

    <div class="main">
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    </div>
    
    	.main {
    		width: 800px;
    		height: 600px;
    		border: 1px solid #000000;
    	}
    
    	.block {
    		width: 100px;
    		height: 80px;
    		margin: 15px;
    		border: 1px solid #8470FF;
    	}
    

    显示效果
    在这里插入图片描述

    有的时候,我们想要让它们横向排列,然后再在到达父块右端的时候自动换行,这样的排版响应式的页面里面具有非常重大的意义。

    于是,我们可以这么做

    方法1

    • 为内部的成员div添加 display: inline-block
    	.block {
    		width: 100px;
    		height: 80px;
    		margin: 15px;
    		border: 1px solid #8470FF;
            display: inline-block; 
            /* div的默认的display为block,块级元素,这也是导致div默认竖向排列的原因 */
    	}
    

    然后我们将div块增加到更多的块数

    <div class="main">
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    </div>
    

    显示效果

    在这里插入图片描述

    方法2

    • 修改排列方式,使用flex布局
    	.main {
    		width: 800px;
    		height: auto;	/* 不要使用定高度,后果自负 */
    		border: 1px solid #000000;
    		display: flex;
    		flex-wrap: wrap;
    	}
    
    	.block {
    		width: 100px;
    		height: 80px;
    		margin: 15px;
    		border: 1px solid #8470FF;
    	}
    

    方法3

    • 使用Grid布局
    	.main {
    		width: 800px;
    		height: 600px;
    		border: 1px solid #000000;
    		display: grid;
    		grid-template-columns: 1fr 1fr 1fr; 
            /* 横向排列规则,把宽度分为三等分 */
    	}
    
    	.block {
    		width: 100px;
    		height: 80px;
    		margin: 15px;
    		border: 1px solid #8470FF;
    	}
    

    展示效果

    在这里插入图片描述
    这个方法能够更加精确地对你的div块进行排版,详细内容会在以后出一个专栏。grad排版也是公司面试css这块知识里经常会出的一块知识。

    总结

    没有总结,直接拿来用就行了。

    展开全文
  • html div横向排列

    千次阅读 2019-03-06 11:31:04
    div class = " aui-row aui-row-padded " > < div class = " aui-card-list " > < div class = " aui-card-list-content-padded " > < img src = " ../../../img/goods.png " /> div > ...

     

    以aui框架布局为例:

    css代码如下:

    .aui-row{
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
      }
      .aui-card-list{
        display: inline-block;
        box-sizing: border-box;
        width: 150px;
        margin-bottom: 0;
      }
    

    html 代码如下:

    <div class="aui-row aui-row-padded">
        <div class="aui-card-list">
             <div class="aui-card-list-content-padded">
                  <img src="../../../img/goods.png" />
             </div>
    	    <div class="aui-card-list-footer aui-border-t">
    	         <div><i class="aui-iconfont aui-icon-laud"></i> 888</div>
    	         <div><i class="aui-iconfont aui-icon-star"></i> 888</div>
    	    </div>
        </div>
        <div class="aui-card-list">
             <div class="aui-card-list-content-padded">
                  <img src="../../../img/goods.png" />
             </div>
    	    <div class="aui-card-list-footer aui-border-t">
    	         <div><i class="aui-iconfont aui-icon-laud"></i> 888</div>
    	         <div><i class="aui-iconfont aui-icon-star"></i> 888</div>
    	    </div>
        </div>
    </div>
    

    以秒杀为例如下代码

    css:

    .time_list{
        border-bottom: 1px solid #eee;
        clear: both;
        border-radius: .15rem;
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
      }
     .time_list ul li{
        width: 20%;
        text-align: center;
        display: inline-block;
        padding: .25rem 0;
      }
     .time_list ul li .tl_time{
        font-size: .9rem;
      }
     .time_list ul li .tl_title{
        font-size: .6rem;
      }
     .time_list .active{
        color: #f6be32;
        font-weight: bold;
        border-bottom: 1px solid;
      }
     .djs{
        line-height: 1.5rem;
        padding:.2rem .5rem;
        font-size: .8rem;
        font-weight: bold;
      }
     .djs span{
        background: #777777;
        color: #fff;
        padding: 0 .1rem;
      }
    

    html:

    <div class="time_list">
              <ul>
                <li class="active">
                  <p class="tl_time">12:00</p>
                  <p class="tl_title">即将开始</p>
                </li>
                <li>
                  <p class="tl_time">12:00</p>
                  <p class="tl_title">即将开始</p>
                </li>
                <li>
                  <p class="tl_time">12:00</p>
                  <p class="tl_title">即将开始</p>
                </li>
                <li>
                  <p class="tl_time">12:00</p>
                  <p class="tl_title">即将开始</p>
                </li>
                <li>
                  <p class="tl_time">12:00</p>
                  <p class="tl_title">即将开始</p>
                </li>
                <li>
                  <p class="tl_time">12:00</p>
                  <p class="tl_title">即将开始</p>
                </li>
                <li>
                  <p class="tl_time">12:00</p>
                  <p class="tl_title">即将开始</p>
                </li>
              </ul>
            </div>
    

    参考链接


    展开全文
  • html5:div 横向排列的方法。

    万次阅读 多人点赞 2017-11-21 12:06:47
    div 横向排列的方法。 以下面这组 div 为例,wrap 的高度由内容撑开 <div id="wrap"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</...
  • div横向排列+滚动条显示

    千次阅读 2019-01-15 17:11:57
    实现多个div在容器内横向排列,  利用white-space这个属性防止父容器内容换行,  同时将容器内元素设置为行内块 display:inline-block来实现。  例子中每个子元素宽度限定为三分之一,  代码如下: ....
  • 两个div横向排列

    千次阅读 2017-06-09 16:31:22
    style="background: #3692FD;border-radius: 6px; width: 28%;height: 10%" onclick="subimtBtn()"> ... <div class="uploadTip" id="uploadTip" style="display: inline"></div> 设置成inline即可
  • 设置多个div横向排列

    千次阅读 2018-11-11 17:23:54
    div class="div1"&gt;&lt;/div&gt; &lt;div class="div1"&gt;&lt;/div&gt; &lt;div class="div1"&gt;&lt;/div&gt; &lt;div ...
  • 以下面这组 div 为例,wrap 的高度由内容撑开 <div id="wrap"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> </div> ...
  • 实现让两个DIV横向排列方法

    千次阅读 2019-05-10 20:47:22
    http://developer.51cto.com/art/201009/225811.htm
  • 多个div横向排列,加横向滚动条

    千次阅读 2019-02-26 14:34:36
    定义一个大的空的div,名字lt_info, 注意定义以下style: width:可以定义百分比,也可以定义固定值,但是一定要定义 overflow-x: scroll; overflow-y: hidden; white-space: nowrap;文本不会换行,文本会在在同一行上...
  • https://blog.csdn.net/weixin_43099985/article/details/84876176
  • 两个div横向排列,顶端对齐的方式。 1、左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整。 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
  • 如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果。代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决div独占一行方法通常...
  • 左边的DIV设定了固定的宽度,右边的DIV如何自适应地填满剩下的屏幕宽度? 浅谈CSS3中display属性的Flex布局
  • 两个DIV横向排列

    2019-09-15 22:36:34
    <div id="1" style="border:#000 solid 1px; padding:5px; width:500px; margin:0px auto; height: 200px;"> <div id="2" style="float:left; b...
  • 如何让多个div横向排列而不换行

    万次阅读 多人点赞 2017-12-15 16:58:01
    现象 多个div排列在一行,包裹的框宽度不足时,那么会换行显示 如图 解决 关键点在于white-space: nowrap;的使用 效果 代码<!DOCTYPE html> <html lang="en"><head> , initial-
  • 今天产品中设计到一个问题就是往DIV里面加子Div,宽度超过父类Div的宽度,想要显示滚动条而不是换行重新添加。  其实可以用table 或用ul,li标签实现,我为了图省事,简单改了下CSS样式。 测试代码如下: &...
  • 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block。所以每一个div都是新的一行,现在把display换成inline就不会换新行了。 &lt;div style="...
  • 如何定义让两个div横向排列

    千次阅读 2014-12-17 19:40:29
    一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block。所以每一个div都是新的一行,现在把display换成inline就不会换新行了。 aaa bbb 方法二: ...
  • 让两个div横向排列 div默认的display属性是block。所以每一个div都是新的一行,现在把display换成inline aaa bbb
  • 如何让div横向排列

    千次阅读 2014-02-18 10:09:12
    http://blog.csdn.net/ldl22847/article/details/5262193 http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> div { float:left; width:200px; height:200px; border:1px solid red } --> w
  • 实现让两个DIV横向排列方法揭秘

    千次阅读 2014-03-26 15:55:56
    你对如何定义让两个DIV横向排列的方法是否熟悉,这里和大家分享一下,主要有两种方法,一种是把display换成inline,另一种就是使用float:right属性,相信本文介绍一定会让你有所收获的。 如何定义让两个DIV横向...
  • 多个div水平横向排列

    千次阅读 2017-03-27 15:25:07
    多个div水平横向排列的方式: 1.使用float: 2.使用display:line

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,429
精华内容 3,771
关键字:

div横向排列