div、css怎么实现内容的分栏，先把左侧排满，高度不够时排到第二列，请教高人~~ DIV+CSS布局，怎么实现两列高度会一致，其中左例随内容长...
div/css \u5982\u4f55\u5b9e\u73b0\u5de6\u53f3\u5206\u680f\uff0c\u5de6\u4fa7\u83dc\u5355\u80fd\u5c55\u5f00/\u9690\u85cf\u5144\u5f1f,div\u5b9e\u73b0\u4e0d\u4e86100%\u9ad8\u5ea6,\u6700\u591a\u53ea\u80fd\u81ea\u9002\u5e94\u9ad8\u5ea6.\u4f60\u8fd8\u662f\u5728iframe\u4e0a\u5b9a\u9ad8\u5ea6\u5427
=============================================
\u5de6\u53f3\u5206\u680f
//\u5de6\u53f3
function switchSysBarl(){
var imgsrc;
imgsrc=document.all("makeleft").src;
document.all("makeleft").src="img/menu_open.gif";
document.all("makeleft").title="\u663e\u793a\u5de6\u8fb9\u7684\u83dc\u5355";
parent.document.all("bbs_left").style.display="none";
}
else{
document.all("makeleft").src="img/menu_close.gif";
document.all("makeleft").title="\u9690\u85cf\u5de6\u8fb9\u7684\u83dc\u5355";
parent.document.all("bbs_left").style.display="";
}
}
<div style="z-index: 2; visibility: inherit; width: auto; height: auto; float: left;"
frameborder="0" scrolling="no" target="main">
<iframe name="bbs_left" style="z-index: 2; visibility: inherit; width: 180px; height: 100%"
src="left.htm" frameborder="0" scrolling="no" target="main">
<div style="background-color: #005fbd; width: 10px; float: left; height: 800px; cursor: hand;
padding: 300px 0px 0px 0px;" id="menuSwitch" onclick="switchSysBarl()">
<iframe name="bbs_main" style="z-index: 1; visibility: inherit; width: 100%; height: 100%" src="right.htm"
frameborder="0" scrolling="yes">
\u5728css\u6587\u4ef6\u4e2d
\u5de6\u5217\u9ad8\u5ea6\u8bbe\u4e3aheight:100%
\u53f3\u5217\u9ad8\u5ea6\u8bbe\u4e3a100%
\u8fd8\u5e94\u8be5\u6709\u4e2a\u5305\u542b\u5de6\u5217\u548c\u53f3\u5217\u7684\u4e3bdiv,\u4e5f\u8bbe\u9ad8\u4e3a100%
可以通过竖向排列的方式，将子div设置为行内块即可。话不多说了，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {border: solid 1px #000}
#main-div {
width: 200px;
height: 300px;
writing-mode: vertical-lr;}
.item {
width: 100px;
height: 50px;
display: inline-block;
background-color: antiquewhite;
writing-mode: horizontal-tb;}
</style>
</head>
<body>
<div id="main-div">
<div class="item">一条内容</div>
<div class="item">一条内容</div>
<div class="item">一条内容</div>
<div class="item">一条内容</div>
<div class="item">一条内容</div>
<div class="item">一条内容</div>
<div class="item">一条内容</div>
</div>
</body>
</html>
效果如下：
这都已经9年了，也就我想到了这个问题的答案，我简直就是个天才，哈哈哈
如果内容是静态的，也就是固定的，那好办，左边一个div，右边一个div，如果内容是从后台输入，动态的，这根本用css实现不了，这样的设计用在平面上可以，用在网页里根本不行，让你们的设计改图吧
最简单的可以这样来做
先div一个大的铺满，然后分别在里面分成几个竖着的div
在每一个竖着的div里面填写你的内容
FLOAT:LEFT。。给层的CSS加个这个浮动！会自动往左边排！排不下了再往下排
什么排版需要这样排？
绛旓細鍋氬洓涓爣绛撅紝涓婂拰涓嬬殑瀹藉害璁剧疆椤甸潰瀹藉害 涓棿涓や釜璁剧疆瀹藉害涓洪〉闈㈠鐨勪竴鍗婄◢灏忥紝骞朵笖娴姩鍚勪负宸︺佸彸璞℃案鎭掑悓瀛︽墍璇寸殑銆
绛旓細1銆佸鏋滄寜鐓у父瑙勮緭鍏ヤ唬鐮侊紝浠ｇ爜濡備笅锛<div class="justify"> <p>寮蹇</p> <p>涓嶅紑蹇</p> <p>寰堜笉寮蹇</p> </div> 2.杩涜棰勮锛岄粯璁ゆ儏鍐典笅娴忚鍣ㄦ樉绀烘晥鏋滃涓嬶紱3銆佺粰div娣诲姞鏍峰紡{text-align: justify;text-align-last: justify;}锛屽氨鍙互瀹炵幇鏂囨湰鍒嗘暎瀵归綈銆傛暣浣撲唬鐮佸涓嬶細<style type="text...
绛旓細娉ㄩ噴锛<div> 鏄竴涓潡绾у厓绱狅紝涔熷氨鏄锛屾祻瑙堝櫒閫氬父浼氬湪 div 鍏冪礌鍓嶅悗鏀剧疆涓涓崲琛岀銆傛彁绀猴細璇蜂娇鐢 <div> 鍏冪礌鏉ョ粍鍚堝潡绾у厓绱狅紝杩欐牱灏卞彲浠ヤ娇鐢ㄦ牱寮忓瀹冧滑杩涜鏍煎紡鍖栥7銆佹渚嬪垎鏋 <body> <h1>NEWS WEBSITE</h1> <p>some text. some text. some text...</p> ... <div class="news"...
绛旓細棣栧厛,鐪嬬湅閭ｄ釜div鏈夊楂,灏辨槸height鐨勫,鍋囪鏄50px;鐒跺悗璁剧疆line-height:50px;text-align:centre; secretohayo | 鍙戝竷浜2010-12-12 涓炬姤| 璇勮 0 1 鍟ュ彨姘村钩鍒嗗竷鍟?宸﹀彸灞呬腑鐨勮瘽鏈塵argin:auto;涓婁笅灞呬腑鐨勮瘽鐢╨ine-height = div height; catamaran | 鍙戝竷浜2010-12-12 涓炬姤| 璇勮 0 1 涓烘偍鎺ㄨ崘...
绛旓細杩欐牱锛屽湪DIV鍐呯敤<P> </P>鏍囩灏卞彲浠ュ紑澶村唴缂╀袱涓瓧浜嗐傝嚦浜庢钀藉垎寮鍏跺疄鏈夊嚑绉嶅姙娉曪細1锛屽湪琛ㄧ粨鏋勪笂鍔ㄨ剳绛嬶紝濡傛灉姣忎釜娈佃惤鍦ㄤ繚瀛樿繘鍘荤殑鏃跺欓兘淇濆瓨涓轰竴鏉¤褰曪紝姣斿涓涓〃涓変釜瀛楁锛欼D锛屽唴瀹癸紝椤哄簭鍙凤紱ID鏄竴绡囨枃绔犵殑鍐呴儴缂栧彿锛屽唴瀹规槸涓涓钀界殑鏂囨湰锛岄『搴忔槸娈佃惤鐨勬樉绀洪『搴忥紱2锛屽鏋滈潪瑕佷竴绡囨枃绔犱繚瀛...
绛旓細1"></div> <div id="bottom"> <div id="2"></div> <div id="3"></div> <div id="4"></div> </div> 鎶1鍜宐ottom璁剧疆涓鏍风殑鏍峰紡闄や簡楂樹笉鍚岋紝234灏辩敱bottom鐨勫搴﹀钩鍧囧垎鎴栬呴殢鎰忓垎锛屼絾鏄娉ㄦ剰鐨勬槸濡傛灉浣犺鍔犺竟妗嗛偅鍔犱簡澶氬皯鍍忕礌鐨勮竟妗嗗氨瑕佸噺鍘荤浉瀵瑰簲鐨刣iv瀹介珮锛屽笇鏈涜兘甯埌浣 ...
绛旓細绗竴绉嶏細<div id="content"> <div class="A">涓婂崐閮ㄥ垎</div> <div class="B">涓嬪崐閮ㄥ垎</div> </div> 绗簩绉嶏細<div id="content"> <dl class="A">涓婂崐閮ㄥ垎</dl> <dl class="B">涓嬪崐閮ㄥ垎</dl> </div> 绛夌瓑锛屽彧瑕瀹炵幇浜嗗姛鑳界敤浠涔堟爣绛鹃兘鍙互锛岀湅涓汉鐨勫枩濂斤紝鎴戞槸姣旇緝鍠滄绗簩...
绛旓細鎵浠ラ渶瑕佺敤鍒版祻瑙堝櫒鐙湁鐨勬爣璇嗭紝濡:display:-webkit-box锛涢渶瑕佸摢浜涙祻瑙堝櫒鏀寔鍙互鐧惧害涓嬨傜劧鍚庨渶瑕佺粰杩欏洓鍒楄缃産ox-flex:1;杩欎釜璺熷墠闈㈢殑灞炴т竴鏍凤紝闇瑕佹坊鍔犳祻瑙堝櫒鐙湁鐨勬爣蹇椼備篃鍙互缁欎竴鍒楄缃竴涓浐瀹氬硷紝鍙﹀鐨勮缃産ox-flex:1涔熷彲浠ュ钩鍧囧垎甯冦傚鏋滀笉鎳傚彲浠ユ煡鐪css3灞炴э紝鎴栬呯户缁彁闂 ...
绛旓細鍙互鏂逛究瀵瑰叾杩涜澶嶇敤銆備綘瀹氫箟濂戒竴涓css鏍峰紡锛屼究鍙互鍦ㄥ涓厓绱犱腑浣跨敤杩欎釜鏍峰紡浜
绛旓細鑰Div 鏇磋兘浣撶幇鏍峰紡鍜岀粨鏋勭浉鍒嗙锛岀粨鏋勭殑閲嶆瀯鎬у己銆 绗簩銆佸鎼滃寮曟搸鏇村姞鍙嬪ソ鍚屾椂鑾峰緱鏇村ソ鐨勭綉绔欐帓鍚 DIV+CSS甯冨眬绠娲佹竻鏅帮紝鍏峰鎼滃寮曟搸SEO鐨勫厛澶╂潯浠躲傚鎼滃寮曟搸鏇村姞鍙嬪ソ锛屾洿瀹规槗琚悳瀵诲紩鎿庢敹褰曪紝閰嶅悎浼樼鐨鍐呭鍜屼竴浜汼EO澶勭悊锛屽彲浠ヨ幏寰楁洿濂界殑缃戠珯鎺掑悕銆 DIV+CSS甯冨眬涓嶅叕鏂逛究鎼滃寮曟搸鏀跺綍锛岃屼笖杩...
