CSS中多个div盒子并排同行显示的实例代码分享-tutorial css-php.cn

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

黄舟

Lepaskan： 2017-07-22 10:32:22

asal

12338 orang telah melayarinya

1、div 两列一行两列DIV布局如何实现，div 两列并排一行两列DIV布局教程解决篇
实现两个DIV盒子并排，一行只显示两列DIV布局，使用width宽度+float浮动即可实现一行显示两列DIV布局。
第一种情况，float浮动相同
让两个div盒子的float值相同，比如都设置float:left或float:right，宽度设置合适即可。这里我们通过案例实现一行两列DIV布局。
1）、完整实例DIV+CSS代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>两个DIV并排</title> 
<style> 
.div-a{ float:left;width:49%;border:1px solid #F00} 
.div-b{ float:left;width:49%;border:1px solid #000} 
</style> 
</head> 
<body> 
<div class="div-a">第一个DIV盒子</div> 
<div class="div-b">第二个DIV盒子</div> 
</body> 
</html>

Salin selepas log masuk

2）、需要注意是宽度，要想一行两列DIV布局，避免第三个DIV也并排，这里就要设置计算好宽度（这里设置百分比宽度为49%），三个DIV盒子宽度之和大于父级宽度，两个DIV宽度之和小于父级宽度，即可实现只有2个DIV并排。
3）、第二种情况，float浮动值不同
一个设置为float:left;一个设置为float:right.。
完整HTML源代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>两个DIV并排</title> 
<style> 
.div-c{ float:left;width:49%;border:1px solid #F00} 
.div-d{ float:right;width:49%;border:1px solid #000} 
</style> 
</head> 
<body> 
<div class="div-c">第三个DIV盒子</div> 
<div class="div-d">第四个DIV盒子</div> 
</body> 
</html>

Salin selepas log masuk

2、DIV横向排列_CSS如何让多个div盒子并排同行显示，如何让多个div盒子并排同行div横向排列显示呢？
我们先设置3个div盒子对象，什么css样式都不设置看看效果。代码如下：
未同行显示div截图
三个div盒子均独占一行显示
div盒子本身默认样式属性是独占一行，而解决div独占一行方法通常有两种，一种为设置浮动，另外一种为设置display样式。接下来为大家通过文章+图片+案例方法介绍解决div盒子对象并排横向排列且同行显示方法。
一、使用css float并排显示
我们对div设置一个float浮动属性即可解决不并排显示，只要你的并排div盒子总宽度小于或等于最外层盒子宽度即可实现多个div对象并排显示。
加float浮动实现div盒子并排显示
加float浮动实现多个div并排显示
这里我们对div通设一个浮动，当然实际使用时候，要通排显示div对象的加入css类，我们就对要同行显示css选择器设置浮动。避免其它不需要设置的也被加入浮动样式。
二、使用css display同行显示
我们加入display:inline即可解决实现同行并排显示div盒子对象。为了区别其他不需要设置横向排列显示div盒子对象，我们对相邻需要同排显示的div盒子统一加粗css类，css命名为".div-inline"。
CSS代码如下：

.div-inline{ display:inline}

Salin selepas log masuk

Html代码片段：

<div class="div-inline">第一个div盒子</div> 
<div class="div-inline">第二个盒子</div> 
<div class="div-inline">第三个盒子</div>

Salin selepas log masuk

三、总结：无论是float浮动还是display实现并排显示，要想并排显示首先总宽度要小于或等于对象上级宽度，这样才能并排显示实现横向排列排版布局。

Atas ialah kandungan terperinci CSS中多个div盒子并排同行显示的实例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

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