Heim > Artikel > Web-Frontend > 让3个DIV并排，但是要让中间的DIV居中，旁边2个平均分配剩余宽度_html/css_WEB-ITnose
让3个DIV并排，但是要让中间的DIV居中，旁边2个平均分配剩余宽度_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:47:401905Durchsuche
我现在想让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>
中间固定宽度 1200px
左
中间
右
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：浏览器样式问题_html/css_WEB-ITnoseNächster Artikel：网页怎样随着浏览器的左右拉伸仍然保持居中_html/css_WEB-ITnose