前端如何让多个盒子在同一排展示？

2020-04-07 13:39发布

站内问答 / HTML/CSS
4349 6 7
发送
6条回答
爱前端
2楼 · 2020-04-07 17:18






1. 使用浮动float:left/right

div{
    width: 100px;
    height: 100px;
    background: pink;
    float: left;
}

1


2


div{
    width: 100px;
    height: 100px;
    background: pink;
    float: right;
}

1


2

2. 使用内联块display:inline-block

div{
    width: 100px;
    height: 100px;
    background: pink;
    display: inline-block;
    
}

1


2


3. 使用弹性盒：display：flex


.box{
    display: flex;
}
.box div{
    width: 100px;
    height: 100px;
    background: pink;
}

    
1

    
2
LovEva
3楼 · 2020-04-07 16:08

浮动float，display的inline-block ， flex都可以

杨亚月
4楼 · 2020-04-13 22:58

一排显示方法:

1、给需要一排排列的元素设置float：left/right;  (兼容性比较好)

2、设置弹性盒子display：flex；不过display：flex；要设置给父元素。（兼容性不好，ie低版本不支持，一般用于移动端较多）


tiffany
5楼 · 2020-04-21 12:04

  1. 首先，定义一个主div,然后在里面添加两个小div。

    作用：用主div来控制两个小div并排的效果。

    代码如下：

    …此处添加你要展示的内容…

  2. 现在用样式来控制并排效果。

    有两种方法。

    一. 按整体像素宽度来布局。

    …此处添加你要展示的内容…

    备注：左右两个div的宽度之和等于主div的宽度。

    效果如下图。

    在HTML中如何让两个div并排显示

  3. 二. 按百分比宽度来布局。

    …此处添加你要展示的内容…

    备注：左右两个div的占比之和等于主div的占比。

    效果如下图。

    在HTML中如何让两个div并排显示


Sauvignon
6楼 · 2020-05-15 11:28

给盒子设置宽高之后，让父元素display:flex，或者让这些盒子浮动

征戰撩四汸
7楼 · 2021-11-12 13:53

第一种方法： 浮动法

这种方法是最简单的，也是我们初学css必须掌握的技能，就是把li浮动起来就好了。
代码如下：




    
    Document
    


    


            
  • 左侧

    •         
  • 中间

    •         
  • 右侧

    •     


第二种方法： 定位法

这种方法也可以，但是比较少用。

第三种方法： 转换为行内块法

我们知道，我们CSS显示模式，有行内显示模式（inline），有块级显示模式（block），还有行内块显示模式（inline-block）

我们知道，在网页布局中，很多地方，我们能用标准流做的，就不用浮动或者定位来做。因为 inline-block 属于标准流，因此比起浮动和定位，更为稳定。

例如淘宝网：
代码如下：




    
    Document
    


    


            
  • 左侧

    •         
  • 中间

    •         
  • 右侧

    •     


第四种方法： table-cell


我们知道 display：table 是转化为表格元素的方法  display:table-cell 转换为单元格元素
  




    
    Document
    


    


            
  • 左侧

    •         
  • 中间

    •         
  • 右侧

    •     



第五种方法： CSS3 布局 display:flex

这是根据CSS3盒子模型，新增属性，有了它书写很方便，而且每个li的宽度可以自适应父盒子，以后用它做响应式网页方便了很多。




    
    Document
    


    


            
  • 左侧

    •         
  • 中间

    •         
  • 右侧

    •     



注意： 因为css3肯定有浏览器兼容性问题，大家不要忘了加前缀


相关问题推荐

  • 大前端是什么？和前端有区别吗？2020-08-28 14:51
    回答 11

    前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。简单地说，能够从 App 屏幕和浏览器上看到的东西都属于前端。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基...

  • 【Web前端基础】HTML文本框大小怎么设置HTML标签 HTML语法 2020-10-27 15:18
    回答 9

    　　inputname=type=textstyle=width:200px;height:20px;

  • web前端培训要多久时间？2020-05-27 09:57
    回答 18

    一般在4.5个月左右。

  • 女生学Web是不是有些难度，零基础！2020-10-11 16:09
    回答 15

    女生零基础学web前端是不难的。这是比较注重实际动手操作的学科，只要你肯用心学，并且有专业老师的指导，女生零基础学web前端，只需要4个月左右的时间

  • 前端适合女生学吗？2020-06-02 17:42
    回答 14

    很适合女生学习，主要是看自己在这方面有没有兴趣

  • css选择器的作用是什么CSS选择器 2020-09-24 11:52
    回答 9

    CSS主要的作用就是给网页中的dom元素设置样式，选择器则是用来匹配dom元素的。CSS中的选择器有三种，分别是标签选择器(根据元素标签名称)，类选择器(根据元素class属性)，id选择器(根据元素id属性)，并且三种选择器可以相互结合使用例如：body{background-col...

  • web前端课程内容都学什么？2020-09-22 21:10
    回答 17

    html、css、js、框架、小程序等

  • 想通过培训学习后进入IT行业，什么方向更好呢？2020-04-29 13:58
    回答 11

    根据自己的兴趣和实际情况来选择编程：Java、大前端、Python人工智能、大数据、Linux云计算、软件测试、PHP、网络安全设计：UI设计、产品经理、三维可视化设计、影视动画、室内设计、VR/AR运营：互联网营销、新媒体运营、短视频运营、电商运营每个人都是不同...

  • input框里如何插入一个文本框？2021-07-31 09:32
    回答 7

    HTML123倒计时JS//验证码var counts = 60;function settime(val) {     if(counts == 0) {         val.removeAttribute(disabled);         val.value = 获取验证码;         counts = 60;         return...

  • CSS样式中div中的元素怎么让他们水平和垂直居中2021-06-27 20:22
    回答 5

    HTML中有个class为box的div元素，通过修改css样式让box元素在页面水平垂直居中显示  

  • 零基础新手学习Web前端应该掌握哪些知识2021-02-03 09:28
    回答 11

    HTML,CSSJavaScriptjQueryvue,React微信小程序，公众号

  • 是否能熟练运用CSS, HTML?2020-12-15 08:43
    回答 7

    对于前端初学者来说，html+css是入门前端最基础的内容，要学好并熟练运用html+css可从以下几点出发： 1.结合html+css+Photoshop，学会如何切割页面。所谓切图是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面。 2.打开有关浏览器网页，参...

  • 【Web前端基础】html文本居中怎么设置HTML标签 HTML语法 2020-10-27 15:09
    回答 7

    html如何让文字居中显示通过设置左右margin值为auto来实现居中的。我们来看个例子就是专设置属div这个块状元素水平居中：html代码：div{border:1pxsolidred;/*为了显示居中效果明显为div设置了边框*/width:200px;margin:20pxauto;/*margin-left与margin-right...

  • 内联块元素的对齐方式问题2020-09-26 11:50
    回答 3

    有关块与内联元素的心得(内联元素右对齐)未改代码:目的:将日期右对齐,但下面的代码,把含日期内联元素转为块元素,再让其向右浮动,但结果显得为错位显示.未能达到预期目的. New Document #css01{width:360px;height:300px;text-align : left; float:left;margin...

没有解决我的问题，去提问