三栏布局，让中栏先显示，且要三个栏高度相同(不能用背景图平铺)求方法_html/css

首頁

web前端

html教學

三栏布局，让中栏先显示，且要三个栏高度相同(不能用背景图平铺)求方法_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:09 PM

我只能做到先让中栏先显示，等高应该怎样实现啊？
[img=http://my.csdn.net/my/album/detail/1113247#][/img]
，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title> New Document </title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body{	margin:0;	padding:0;	font-family:Arial,sans-serif;	text-align:center;}#container{	width:768px;	margin:0 auto;	padding:0;}#header{	width:100%;	height:50px;	margin:5px 0;	padding:0;	background:#CCC;}#content{	float:left;	width:100%;}#col-container{	float:left;	width:565px;	padding:0;	margin:0;}.main-content{	float:right;	width:362px;	background:#CCC;}.left-content{	float:left;	width:200px;	background:gray;}#right{	float:right;	width:200px;	margin-left:3px;	background:gray;}</style></head><body><div id="container">	<div id="header">header</div>	<div id="content">		<div id="col-container">			<div class="main-content">main<br />main<br />main<br />main<br />main<br />			</div>			<div class="left-content">left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />			</div>		</div>		<div id="right">right<br />right<br />right<br />right<br /></div>	</div></div></body></html>

回复讨论(解决方案)

设置相同的固定高度或加载后js设置高度。

我想让高度自适应，三列都跟内容最高的那列相同，不用js能实现吗？

自适应的话只好js实现

可以实现的，在这个栏目里的迅雷面试题中最后一道题就是这个，里面有答案。

http://topic.csdn.net/u/20091009/11/179bf6c0-437d-4875-b03b-d11211e69779.html?28820

里面有问题同答案地址

上面所说的等高不是正真的等高，而视觉上的，用了border而以

js的方法能给我贴个代码吗？我学习这个时间不长，没啥经验谢谢啦！！！！

等高： http://aliceui.com/equal-height-layout/
后出现的应该是用ajax在之前的载入完后加载的吧

等高：http://aliceui.com/equal-height-layout/
后出现的应该是用ajax在之前的载入完后加载的吧

没那么复杂吧，把main列写在前面就先加载了啊

引用 8 楼 p2227 的回复:
等高：http://aliceui.com/equal-height-layout/
后出现的应该是用ajax在之前的载入完后加载的吧

没那么复杂吧，把main列写在前面就先加载了啊哦，那就是你已经解决了。另外一个问题上面的连接可以不

恩恩，这方法可以解决。用js怎样解决等高问题呢

建议楼主不要学习用JS实现等高的办法，因为这是违背脚本不控制基本布局的原则；其二上面的这些方法主要采用一个正margin一个负padding的技巧性处理，但这个是有副作用的，有点儿定时*的味道，个人觉得，其实很多网页设计是不需要等高的，通常可以用背景色搞定，或者很多背景色本来就是空白的。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存，這玩意兒，說簡單也簡單，說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章，結果用戶打開還是老版本，這滋味，誰受得了？這篇文章，咱就來扒一扒這背後的彎彎繞繞，以及如何優雅地解決這個問題。讀完之後，你就能輕鬆應對各種緩存難題，讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存，說白了就是瀏覽器或者服務器為了提高訪問速度，把一些靜態資源（比如圖片、CSS、JS）或者頁面內容存儲起來。下次訪問時，直接從緩存裡取，不用再重新下載，速度自然快。但這玩意兒，也是個雙刃劍。新版本上線，