精华内容
下载资源
问答
  • 两个div并列显示的方式

    千次阅读 2019-08-12 13:46:33
    1、flex定位 子元素等分父元素宽度 .parent{ display:flex; width:100%; height:300px; } .son1{ flex:1; } .son2{ flex:1 } ....div1,.div2 { float:left; width:50%; height:300p...

    1、flex定位

    子元素等分父元素宽度

    .parent{
        display:flex;
        width:100%;
        height:300px;
    }
    .son1{
        flex:1;
    }
    .son2{
        flex:1
    }

    2、float定位

    .div1,.div2 {
        float:left;
        width:50%;
        height:300px;
    }

    3、display:table-cell

    子元素不用设置宽度(设置也没用),它是由父元素的宽度决定的,几个table-cell等分父元素的宽度

    .parent {
        display:table;
        width:100%;
        height:300px;
    }
    
    .son1,.son2 {
        display:table-cell;
    }

    4、绝对定位

    translate(xx%,yy%) 作用是,往上(x轴),左(y轴)移动自身长宽的 xx%/yy%,以使其居于中心位置。

            .son1{
                background-color: blue;
                position: absolute;
                left:0;
                top:0;
                width:50%;
                height:300px;
                border:1px solid black;
            }
    
            .son2{
                background-color: blueviolet;
                position: absolute;
                transform: translate(100%,0);
                width:50%;
                height:300px;
            }

     

    展开全文
  • 2个div并列

    2019-03-26 01:03:06
    NULL 博文链接:https://baiiiuuu.iteye.com/blog/1130265
  • 浅谈实现两个div并列的多种方法

    万次阅读 2017-03-16 11:10:26
    #div1{ width:50%; height:300px; background:blue; float:left; } #div2{ width:50%; height:300px; background:green; float:left; } 方法二:display:table-cell #parent{ width:100%; di

    方法一:float

    #div1{
    	width:50%;
    	height:300px;
    	background:blue;
    	float:left;
    }
    #div2{
    	width:50%;
    	height:300px;
    	background:green;
    	float:left;
    }


    方法二:display:table-cell

    #parent{
    	width:100%;
    	display:table;
    }
    #div1{
    	width:50%;
    	height:300px;
    	background:blue;
    	display:table-cell;
    }
    #div2{
    	width:50%;
    	height:300px;
    	background:green;
    	display:table-cell;
    }


    方法三:负margin

    #parent{
    	display:flex;
    	overflow:hidden;
    }
    #div1{
    	width:50%;
    	height:300px;
    	background:blue;
    	padding-bottom:2000px;  
        margin-bottom:-2000px;  
    }
    #div2{
    	width:50%;
    	height:300px;
    	background:green;
    	padding-bottom:2000px;  
        margin-bottom:-2000px;  
    }

    方法四:绝对定位

    *{
    	margin:0;
    	padding:0;
    }
    #div1{
    	width:50%;
    	height:300px;
    	background:blue;
    	position:absolute;
    	left:0;
    	top:0;
    }
    #div2{
    	width:50%;
    	height:300px;
    	background:green;
    	position:absolute;
    	transform:translate(100%, 0);
    }

    方法五:flex布局

    #parent{
    	display:flex;
    }
    #div1{
    	width:50%;
    	height:300px;
    	background:blue;
    	flex:1;
    }
    #div2{
    	width:50%;
    	height:300px;
    	background:green;
    	flex:1;
    }

    展开全文
  • css如何让两个div并列在同一行

    万次阅读 2019-09-22 19:13:04
    https://blog.csdn.net/weixin_43650440/article/details/83897342 貌似不行?? 然后参考: ... 需求:两个div块级元素在同一行水平显示。 说明:两种方法来实现 ...1、两个div全部设置成displa...

    https://blog.csdn.net/weixin_43650440/article/details/83897342

    貌似不行??

    然后参考:

    https://blog.csdn.net/xuerwang/article/details/81981741

    需求:两个div块级元素在同一行水平显示。

    说明:两种方法来实现

               1、两个div全部设置成display:inline-block;

                2、前一个div设置成为:float:left   后一个div设置为float:right

    注意 :是两个div同时设置,我就设置了后边的那一个,结果调到心烦
    ————————————————
    版权声明:本文为CSDN博主「web coder」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/xuerwang/article/details/81981741

    但是两个都拼在一起了。不能够左右分开靠边。

    所以我现在用以下办法:

    <div>
        <div class="header">
          <div class="left">hello</div>
          <div class="right">
            <img class="img" mode="aspectFit" src="/static/icon/me.png">
          </div>
        </div>
    
    .header{
      width:100%;
      line-height: 20px;
      .left{
        display: inline-block;
        font-size: 16px;
      }
      .right{
        float:right;
        right:20px;
        width: 20px;
        height:20px;
        .img{
          width:100%;
          height:100%;
        }
      }
    }

    用flex会不会好一点?也可以吧?

    不过我不太会。忘记了。

    展开全文
  • 两个div并列

    2014-10-11 00:37:02
    div1 div2 body{ margin: 0; width: 100%; } #div1{ height: 30px; width: 10%; border: solid 1px #000000; background-color: #0066CC; float: left; } #div2{ height: 30px; width: 9

    Example 1:

    http://jsfiddle.net/76Raj/3/

    <body>
      <div id="main">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
      </div>
    </body>

    body{
      margin: 0;
      width: 100%;
    }
    #div1{
      height: 30px;
      width: 10%;
      border: solid 1px #000000;
      background-color: #0066CC;
      float: left;
    }
    #div2{
      height: 30px;
      width: 90%;
      border: solid 1px #000000;
      background-color: #66CC00;
    }

    div1
    div2

    Example 2:

    <div id="parent">
        <div class="right">right</div>
        <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper porta sem, at ultrices ante interdum at. Donec condimentum euismod consequat. Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin at ante nec neque commodo bibendum. Cras bibendum egestas lacus, nec ullamcorper augue varius eget.</div>
    </div>


    #parent {
        overflow: hidden;
        border: 1px solid red
    }
    .right {
        float: right;
        width: 100px;
        height: 100px;
        background: #888;
    }
    .left {
        overflow: hidden;
        height: 100px;
        background: #ccc
    }


    right
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper porta sem, at ultrices ante interdum at. Donec condimentum euismod consequat. Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin at ante nec neque commodo bibendum. Cras bibendum egestas lacus, nec ullamcorper augue varius eget.


    展开全文
  • 以下提供了5种实现两个div并列一行显示的方法,其中最常用的为浮动,还有定位等方法可以实现。 方法一:float浮动,float:left;为左浮动,也可以设置为float:right;右浮动,也可以实现两个div并列一行。 #div1{ ...
  • 最近在做一前端小程序的时候,需要模拟 qq 聊天框的样式,其中头像和输出的文本如何保持在一条线上让我搞了很久,记录一下。 做法 <div class="btalk" id="bTalk"> <div id="khName">我</div>...
  • 如何实现两个或多个div并列于一行

    千次阅读 2021-06-18 12:57:27
    但是,如何让两个或多个块区域并列于一行?块状元素有一个很重要的“float”属性,可以达成这种效果。float 属性也被称为浮动属性,这个词非常形象。对前面的div元素设置浮动属性后,当前面的div元素留有足够的空白...
  • 两个DIV并列排在一个大的DIV中

    万次阅读 2012-05-29 17:29:33
    今天突然碰到排版问题,对于我们这些不用那些网页制作软件的人来说,这有时候还真的是大难题。  如题,终于解决了。  css代码如下:  #page { margin:0 25% 0 25%; padding: 10px 10px; border-style...
  • 两个div并列显示

    千次阅读 2017-05-09 10:46:46
    要求: 根据屏幕宽度,实现两个div并排显示 直接展示源码: 浮动模型 #div1{  width:50%;  height:400px;  float:left;  background:red; } #div2{  width:50%;  height:400px;  ...
  • css怎样让两个div重叠CSS如何使两个div重叠,css使两个div重叠的方法:首先,使用[position:absolute]属性为div设置绝对定位;然后使用z-index属性确定哪个div在顶层。z-index属性用于指定元素的堆叠顺序。环境:...
  • 1. 设置display:tablehtml>Document.box{width:200px;display:table;margin:0auto;}.one{width:100px;background-color:pink;display:table-cell}.two{width:100px;background-color:red;display:table-cell;...
  • div class="modal-body" style="width:100%; overflow: auto;margin: 0;"> <div id="main" class="col-xs-12"> <div id="menu" class="col-xs-6" style="border: 1px solid #ccc; ...
  • CSS-并排对齐两个div

    2021-06-17 11:30:06
    CSS-并排对齐两个div这个问题已经在这里有了答案:并排对齐元素 3个答案我有一个小问题。 我正在尝试使用CSS并排对齐两个div,但是,我希望将中心div在页面中水平居中放置,我通过使用以下方法实现了这一点:#page-...
  • 问题来源 解决方案 使用一个div包裹这些div
  • 我试图在标签内并排对齐两个社交按钮文本对齐:居中不适用于按钮,也不浮动:左或浮动:右HTML:COPYRIGHT 2014Medialock Inc. facebook.com/medialock twitter.com/medialockCSS:/*FOOTER*/footer{...
  • 怎么让两个div并排同行显示

    千次阅读 2021-06-14 08:30:25
    如何让两个div并排同行显示前段时间在做界面的时候,想要实现个两个DIV并排的界面,做之前想着挺简单的,只要将一个div浮动就可以了。然后就测试了一下。下面是部分代码自己测试代码DIV1DIV2效果效果两个div的宽度...
  • 两个div并排的实现代码,一般在使用过程中,最好外面再包括一个用来定位居中显示。这里主要是了解下css的左右浮动布局给开始学习css的朋友。
  • 解决办法: 将display设置为:inline-block 转载于:https://www.cnblogs.com/dreamsqin/p/7020337.html
  • 解决办法: 给div添加样式vertical-align: top; 转载于:https://www.cnblogs.com/dreamsqin/p/7020352.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,551
精华内容 3,020
关键字:

两个div并列