简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > html tutorial > teks badan

二列div固定宽度_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 11:31:24
asal
1021 orang telah melayarinya

二列div固定宽度:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
在div+css布局中经常会用到两列固定宽度的div，一般用来对页面的功能区域的划分。之前已经介绍了一列div固定宽度，下面简单介绍一下如何让两列div并列显示，并且宽度是固定的。其实原理很简单，就是给两个div以固定的宽度，然后让他们并列显示。代码:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.left {  width: 150px;  height: 50px;  background-color: green;  float: left;} .right {  width: 150px;  height: 50px;  background-color: blue;  float: left;}</style></head><body>  <div class="left">我是左边</div>  <div class="right">我是右边</div></body></html>
Salin selepas log masuk

以上代码中使用float属性，让两个div在一行显示。点击可查看flaot属性介绍。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4769

更多内容可以参阅:http://www.softwhy.com/divcss/

Label berkaitan：
二列div固定宽度
sumber：php.cn
Artikel sebelumnya：TinyPNG-一个压缩PNG的神站_html/css_WEB-ITnose Artikel seterusnya：Foundation 6 – 先进的响应式的前端开发框架_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Tajuk semula: lajur div tetap dan baki lebar Saya cuba mencipta susun atur 5 lajur di mana semua lajur adalah ketinggian penuh tetingka...
daripada 2023-09-14 17:17:47
0
1
299
Teg input HTML secara tidak dijangka menggerakkan garis grid CSS Untuk memudahkan masalah saya, katakan saya mempunyai div grid 2x2CSS. Saya menggunakan te...
daripada 2023-09-14 00:31:55
0
2
229
Tambah jadual secara dinamik dalam teg borang/div Jadual yang dibuat secara dinamik muncul di luar teg div. Saya sedang membuat borang penda...
daripada 2023-09-13 23:18:44
0
1
231
Gunakan kotak flexible shrink wrap untuk membalut item flex supaya ia boleh ditengahkan Saya mempunyai flexbox dengan kandungan yang padat. Bagaimana untuk mengecilkan flexbox ke...
daripada 2023-09-13 15:26:47
0
1
259
Menunjukkan bahawa flex menduduki lebar yang lebih besar daripada lebar yang ditentukan pada div Div mempunyai lebar tertentu dan teks di dalamnya datang secara dinamik daripada API dan m...
daripada 2023-09-11 18:37:38
0
1
304
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！