求教分栏，div+css，不是frame框架的那种_html/css

求教分栏，div+css，不是frame框架的那种_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 09:08:30

原创

1304人浏览过

内容三部分这让分布，用div和css怎么做。。。。跪求各种大神，为什么我的div只会上下排列。。。。

SpeakingPass-打造你的专属雅思口语语料

使用chatGPT帮你快速备考雅思口语，提升分数

查看详情

回复讨论(解决方案)

求大神，自暖贴

因为div是块级元素，块元素在没有任何布局属性作用时，默认排列方式是换行排列，要想左右排列需要加浮动

float？可是为什么加了之后还是。。。。。额，我明白了，我一个20%，一个80%，不行，另一个要小鱼80%。。。。哈哈，多谢多谢

<div><div  style="width:100px;float:left;" ></div> <div style="width:290px%;float:right"></div></div>

登录后复制

<div><div  style="width:100px;float:left;" ></div> <div style="width:290px%;float:right"></div></div>

登录后复制

这只是左右啊，不过，我已经解决了，谢谢两位，结贴走人

<style>*{    margin:0;    padding:0;    box-sizing: border-box;    border: 0px solid red;}#main {    margin: 10px;}#bd {    margin-top: 10px;}#content{    margin-left: 10px;}#main{    display: inline-block;}#header{    height: 80px;    background: #ffbbbb;}#bd{    height: 500px;}#sidebar, #content{    height: 100%;    display: inline-block;    float: left;}#sidebar{    width: 200px;    background: lightgreen;}#content{    width: 600px;    left: 200px;    background: lightblue;}</style><div id=main><div id=header>header</div><div id=bd><div id=sidebar>sidebar</div><div id=content>content</div></div></div>

登录后复制

我 6 楼发的有点问题, 在窗口宽度小到一定程度时, 会破坏布局 content 位置会换行.

尽管楼主已结帖, 我还是发一个:

header 定高, sidebar 定宽, 其余都能随窗口尺寸变化自适应的.

<style>*{    margin:0;    padding:0;    box-sizing: border-box;    border: 0px solid red;}#main {    margin: 10px;    min-width: 500px;}#bd {    margin-top: 10px;}#content{    margin-left: 10px;}#header{    height: 80px;    background: #ffbbbb;}#bd{    min-height: 300px;}#sidebar, #content{    height: 100%;}#sidebar{    width: 200px;    display: inline-block;    float:left;    background: lightgreen;}#content{    position:relative;    margin-left: 210px;    background: lightblue;}</style><div id=main><div id=header>header</div><div id=bd><div id=sidebar>sidebar</div><div id=content>content</div></div></div>

登录后复制