精华内容
下载资源
问答
我要提问
  • HTML中如何让两个div并排显示，举个例子
    万次阅读
    2019-01-18 13:21:12

    在HTML中让两个div并排显示，通常情况下有三种实现方式，包括:
    https://zhidao.baidu.com/question/135016260138604645.html
    （1）设置为行内样式，display:inline-block

    （2）设置float浮动
    （3）设置position定位属性为absolute

    以下为三种方式的具体实现代码：

    1、设置每个div的展现属性为行内样式，示例代码为：

    <div class="app">

<div style="display:inline-block;background:#f00;">div1</div>

<div style="display:inline-block;background:#0f0;margin-left:10px;">div2</div>

</div>

    2、设置float浮动，示例代码为：

    <div class="app">

<div style="float:left;background:#f00;">div1</div>

<div style="float:left;background:#0f0;margin-left:10px;">div2</div>

</div>

    3、设置position定位属性为absolute, 示例代码为：

    div1
    div2
    扩展资料： css清除浮动方法

    （1）添加新的元素 、应用 clear：both

    .clear {

clear: both; 
height: 0;

height: 0;
overflow: hidden;
}

    （2）父级div定义 overflow: auto

    .over-flow {
overflow: auto;

zoom: 1; //处理兼容性问题
}
（3）伪类  :after 方法  outer是父div的样式

.outer { zoom:1; }    /*==for IE6/7 Maxthon2==*/

.outer :after {

clear:both;

content:'.';

display:block;

width: 0;

height: 0;

visibility:hidden; 

}
    更多相关内容

  • 在HTML中如何让两个块状元素并排显示

     千次阅读 2021-07-23 21:34:40
    我们知道，在css布局模型中，分为三个类型： ...但现在我们需要让这两个盒子并排显示，比如这样： 我们就可以使用下面的代码，让两个块状元素靠左并排 <!DOCTYPE html> <html> <head> .

    我们知道，在css布局模型中，分为三个类型：

    1、流动模型（Flow）
    2、浮动模型 (Float)
    3、层模型（Layer）

    其中流动模型是网页中默认的布局模型，那如果我们想让两个块状元素并排显示，就需要用到浮动模型了。

    假设我们现在有两个“盒子”，在网页中默认的形式应该是这样的：

    但现在我们需要让这两个盒子并排显示，比如这样：

     

    我们就可以使用下面的代码，让两个块状元素靠左并排

    <!DOCTYPE html>
<html>
	
<head>
    <meta charset="UTF-8">
    <title>让元素并排显示--浮动模型</title>
    <style type="text/css">
    div {
        border: 2px red solid;
        width: 200px;
        height: 100px;
        text-align:center;/* 让块状元素中的内容居中显示 */
    }
    #div1,#div2{
        float:left;
    }
    </style>
</head>

<body>
    <div id="div1">第一个块状元素</div>
    <div id="div2">第二个块状元素</div>
</body>

</html>

     同理，如果把

        #div1,#div2{
        float:left;
    }

    改为

        #div1,#div2{
        float:right;
    }

    那么两个块状元素就会靠右并排显示

    如果我们想让两个元素一个靠左一个靠右显示，就可以使用下面的代码

    <!DOCTYPE html>
<html>
	
<head>
    <meta charset="UTF-8">
    <title>让元素并排显示--浮动模型</title>
    <style type="text/css">
    div {
        border: 2px red solid;
        width: 200px;
        height: 100px;
        text-align:center;/* 让块状元素中的内容居中显示 */
    }
    #div1{
        float:left;
    }
    #div2{
        float:right;
    }
    </style>
</head>

<body>
    <div id="div1">第一个块状元素</div>
    <div id="div2">第二个块状元素</div>
</body>

</html>

    效果如下

     

    收起
    展开全文
    css css3 前端

  • HTML页面中使两个div并排显示

     万次阅读 2020-08-14 19:03:07
    在HTML中实现两个及以上div并排显示

    在HTML中实现两个div并排显示，方法如下：

    • 方法1：设置float浮动
      对需要并排显示的div设置样式：style="float:left;"
<div style="float:left;">div1</div>
    • 方法2：设置div为行内样式
      对需要并排显示的div设置样式：display:inline-block
<div style="display:inline-block;">div1</div>
    • 方法3：设置position定位属性为absolute，示例代码如下
      <div style="position: absolute;width:100px;">div1</div>
<div style="position: absolute;left:100px;margin-left:10px;">div2</div>

    inline-block存在的小问题

    • 问题描述
      使用display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符。
    • 解决方法：
      对父元素添加属性，{ font-size:0 }，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙。

    CSS display属性详解

    display属性值如下：

    • display:none —— 将元素隐藏，不在文档流中占位，浏览器也不会解析该元素。
    • display:block —— 此元素将显示为块级元素，此元素前后会带有换行符。
    • display:inline —— 此元素会被显示为内联元素，元素前后没有换行符。
    • display:inline-block —— 行内块元素。
    • ……

    块级元素

    • 总是以一个块的形式表现出来，占领一整行。若干同级块元素会从上之下依次排列（使用float属性除外）。
    • 可以设置高度、宽度、以及margin属性和padding属性。
    • 当宽度（width）缺省时（未明确指定其宽度），它的宽度是其容器的100%。
    • 块级元素中可以容纳其他块级元素或行内元素。
    • 块级元素的display属性值默认为block。

    行内元素(内联元素)

    • 行内元素不会单独占据一整行，而是只占领自身的宽度和高度所在的空间。若干同级行内元素会从左到右（即某个行内元素可以和其他行内元素共处一行），从上到下依次排列。
    • 行内元素不可以设置高度、宽度，其高度一般由其字体的大小来决定，其宽度由内容的长度控制。
    • 行内元素只能设置左右的margin值和左右的padding值，而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
    • 行内元素一般不可以包含块级元素。
    • 块级元素的display属性值默认为inline。
    收起
    展开全文

  • HTML中如何让两个div并排显示，举个例子?

     2021-06-10 10:22:30
    慕莱坞森在HTML中让两个div并排显示，通常情况下有三种实现方式，包括:(1)设置为行内样式，display:inline-block(2)设置float浮动(3)设置position定位属性为absolute以下为三种方式的具体实现代码：1、设置每个div的...

    d6fcfe491d941c224d49fb273179e080.png

    慕莱坞森

    在HTML中让两个div并排显示，通常情况下有三种实现方式，包括:(1)设置为行内样式，display:inline-block(2)设置float浮动(3)设置position定位属性为absolute以下为三种方式的具体实现代码：1、设置每个div的展现属性为行内样式，示例代码为：

    div1
    div2
    2、设置float浮动，示例代码为：
    div1
    div2
    3、设置position定位属性为absolute, 示例代码为：
    div1
    div2
    扩展资料：css清除浮动方法(1)添加新的元素 、应用 clear：both.clear {clear: both; height: 0;height: 0;overflow: hidden;}(2)父级div定义 overflow: auto.over-flow {overflow: auto;zoom: 1; //处理兼容性问题}(3)伪类  :after 方法  outer是父div的样式.outer { zoom:1; }    /*==for IE6/7 Maxthon2==*/.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden; }
    收起
    展开全文

  • 在HTML中实现两个div并排显示

     2021-06-10 00:57:49
    在HTML中让两个div并排显示，通常情况下有三种实现方式，包括:(1)设置为行内样式，display:inline-block(2)设置float浮动(3)设置position定位属性为absolute以下为三种方式的具体实现代码：个人觉得float浮动方式...
    收起

  • DIV横向排列_CSS如何让多个div盒子并排同行显示

     千次阅读 2021-06-16 08:54:16
    div盒子本身默认样式属性是独占一行，而解决div...一、使用css float并排显示 - TOP我们对div设置一个float浮动属性即可解决不并排显示，只要你的并排div盒子总宽度小于或等于最外层盒子宽度即可实现多个div对象并排...
    收起

  • 怎样让两个div一个居左一个居右并排显示？急

     千次阅读 2021-06-20 00:46:10
    .nav {MARGIN: 0;WIDTH: 100%;FLOAT: leftFONT-FAMILY: verdana;HEIGHT: 28px;BACKGROUND:#128AD9;font-family:Arial, Helvetica, sans-serif;font-size:12px;}.nav UL {PADDING: 0px;DISPLAY: block;...
    收起

  • css如何让两个div并排显示？

     2021-06-16 07:49:19
    让两个Div并排显示的方法有很多，使用display的inline属性、通过设置float来让Div并排显示都可以实现，下面我们来看一下css实现两个div并排显示的方法。让两个Div并排显示一、使用display的inline属性两个div并排...
    收起

  • HTML笔记-如何让两个div并排显示

     2020-05-09 02:11:56
    如何让两个div并排显示（让abel和input并排显示） 一. 按整体像素宽度来布局。 <div id="main" style="width:1200px;"> <div id="left" style="width:300px;float:left;">…此处添加你要展示的内容…<...
    收起

  • html 中 div 盒子并排展示

     千次阅读 2018-11-24 23:28:00
    在项目中，遇到一个前端问题，觉得小问题就别去找前端工程师解决了，还是自己动动手吧。...1、先画一个盒子 div ，在页面中规划出展示内容的区域位置(ps：width、height 这两个是必要的)，如果需要水平...
    收起

  • css使两个盒子并列_盒子模型(重点)

     千次阅读 2020-10-21 22:59:42
    所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。...行内元素比如 文字 类似牛奶，也需要一个盒子把他们装起来，我们前面学过的双标签都是一个盒子。有了盒子，我...
    收起

  • css如何让多个div盒子并排同行显示？

     千次阅读 2021-02-27 10:50:52
    一、使用css float并排显示我们对div设置一个float浮动属性即可解决不并排显示，只要你的并排div盒子总宽度小于或等于最外层盒子宽度即可实现多个div对象并排显示。div {float:left}这里我们对div通设一个浮动，当然...
    收起

  • html – 两个盒子,并排,每个50％,但两者都稍长,不在同一条线上？

     2021-06-30 05:04:52
    我正试图让两个并排的盒子占据屏幕的整个宽度.但是,当将宽度设置为50％时,每个盒子要扩展大约10px,宽度大于50％.我究竟做错了什么？#sides {padding-top: 40px;padding-bottom: 40px;background-color: white;}#left...
    收起

  • CSS中多个div盒子并排同行显示的实例代码分享

     2021-01-17 17:48:36
    1、div 两列 一行两列DIV布局如何实现，div 两列并排 一行两列DIV布局教程解决篇实现两个DIV盒子并排，一行只显示两列DIV布局，使用width宽度+float浮动即可实现一行显示两列DIV布局。第一种情况，float浮动相同让两...
    收起

  • HTML中快速实现div盒子有间隙并排三个小方法

     千次阅读 2020-02-20 21:14:26
    div盒子并排显示在各大网页中式很寻常的页面效果，但是实现这种效果的方法确不止一种 方法一：使用float .father{ width: 660px; height: 150px; margin: 0 auto; border: 2px solid red; overflow: hidden...
    收起

  • css使两个盒子并列_CSS布局模式

     2020-11-20 09:07:47
    CSS 布局模式，有时简称为布局，是一种基于HTML元素盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。正常流（Normal flow）也被称为文档流指在不对页面进行任何布局控制时，浏览器默认的HTML布局...
    收起

  • 如何并排放置两个内容大小的HTML元素？

     千次阅读 2021-06-16 08:26:39
    如何并排放置两个内容大小的HTML元素？最外面的容器(0)由页面布局的其他部分调整大小。它包含几个结构相同的项目(1)。容器(1)包含一些小内容(2) - 实际上它只是一个数字;把它想成章节号。在这个数字的右边有容器(3)...
    收起

  • css怎么设置4个div并排显示

     2021-08-05 04:52:51
    css设置4个div并排的方法：1、使用float属性让4个div浮动起来即可。2、使用“display:inline;”或“display: inline-block;”样式将4个div转换为内联元素或内联块状元素即可。本教程操作环境：windows7系统、CSS3&...
    收起

  • html – 并排设置两个div,然后设置第三个div

     2021-06-13 01:21:12
    我如何并排设置两个div,而下面的第三个div设置为这样.我当前的代码如下所示,将div放在name div之后Name6:30 PMNoteCSS：#contact_table_data {width:inherit;height:inherit;background-color:#99cc33;max-width:400...
    收起

  • css使两个盒子并列_CSS 布局经典问题初步整理

     千次阅读 2020-11-20 09:07:48
    CSS 基础知识下面几个入门教程不错：幕课网 – HTML+CSS基础课程：偏基础，可以在线练习和预览MDN – CSS入门教程: MDN 的官方文档学习 CSS 布局：排版和配色特别舒服，简短但不深入，适合概览入门CS...
    收起

  • 两个div不同高度并排显示

     2021-06-26 04:19:37
    在HTML中让两个div并排显示，通常情况下有三种实现方式，包括:(1)设置为行内样式，display:inline-block(2)设置float浮动(3)设置position定位属性为absolute以下为三种方式的具体实现代码：1、设置每个div的展现属性...
    收起

  • CSS一个盒子在另一个盒子水平垂直居中

     千次阅读 2021-07-04 05:16:02
    display:inline-block } 第六种：利用空盒子做外容器，里边的块元素会自动垂直居中，只需要控制一下水平居中就可以达到效果。 body>div:nth-of-type(6){ width:400px; height:400px; background:#ff0; margin-...
    收起

  • css使两个盒子并列_CSS常见面试题

     2020-10-21 22:59:37
    阅读本文约需要9分钟大家好，我是小蔡，接下来开始今天的技术分享！...标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin低版本IE盒子模型：宽度=内容宽度（content+border+padd...
    收起

  • html在一行内横向排列并排同行同时显示两个多个div盒子的方法

     万次阅读 2017-05-13 11:18:19
    一、并排在一行的两个div样式有这种情况：ie或者ff下对于子div设置float左的时候，如果另外的子div没有设置float左的 话，两个浏览器下会有区别，具体有一个会产生间隙。兼容做法就是都设置float属性。但是记住有...
    收起
    css

  • html – 使两个CSS元素并排填充他们的容器

     2021-06-12 18:44:19
    技术#1 – 现代CSS3 calc() 使用CSS3’s calc() length，您可以通过将.element的宽度设置为： .element ... } ​ 请注意，最后一个技术会折叠两个元素之间的4px间距，而前两种技术会导致8px出现在两个项之间，4px在边。
    收起

  • css – 如何并排放置两个元素？

     2021-06-24 07:41:20
    我对CSS世界很陌生,我一直试图弄清楚如何在最后的例子中并排放置.main和.comment,但有一点需要注意.我不想将两者都压缩到相同的#container中,我希望...更具体地说,我希望.main在一个盒子里,而.comment在另一个盒子...
    收起

  • css使两个盒子并列_前端学习CSS

     2020-11-20 09:07:50
    一 CSSCSS是Cascading Style Sheets的缩写，层叠样式表，用来控制网页数据的显示，可以使网页的显示与数据内容分离。二 引入方式　(1)行内式：在标记的style属性中设置CSS样式，不推荐使用。DOCTYPE html><...
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,555
精华内容 1,022
热门标签
关键字：

html两个盒子并排显示