masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > 让3个DIV并排，但是要让中间的DIV居中，旁边2个平均分配剩余宽度_html/css_WEB-ITnose

让3个DIV并排，但是要让中间的DIV居中，旁边2个平均分配剩余宽度_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-21 09:47:40
asal
1932 orang telah melayarinya

本帖最后由 zhaishang1 于 2013-12-13 09:08:26 编辑

我现在想让3个DIV并排，这个我知道用style:float,但是我还有一个要求就是，中间的一个DIV有固定宽度，比如1200px。高度无所谓，就100%，然后除去这个1200px所占的宽度，根据剩余的宽度，平均分配给剩下的2个DIV。效果相当于让中间的DIV居中，但是旁边的2个DIV要宽度一样。如何实现？

回复讨论(解决方案)

只见过两边固定，中间自适应的，还没有见过中间固定，两边自适应的布局呢。

你这估计得要js实现了吧。
计算浏览器文档的宽度，减去中间的固定宽度，再平分到两边的模块中去。

如果浏览器窗口的宽度小于中间的模块宽度，那两边的模块不就没有了？？ 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><div style=" float:left">左</div><div style=" width:1200px; float:left; text-align:center;">中间</div><div style=" text-align:right;">右</div></body></html>
Salin selepas log masuk

中间固定宽度 1200px



左



中间

右


Label berkaitan：
让3个DIV并排，但是要让中间的DIV居中，旁边2个平均分配剩余宽度
sumber：php.cn
Artikel sebelumnya：浏览器样式问题_html/css_WEB-ITnose Artikel seterusnya：网页怎样随着浏览器的左右拉伸仍然保持居中_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
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2207
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2359
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1973
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1858
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1923
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