两列左侧自适应布局

<div class="g-bd2 f-cb">
    <div class="g-mn2">
        <div class="g-mn2c">
            <p>左侧自适应</p>
        </div>
    </div>
    <div class="g-sd2">
        <p>右侧定宽</p>
    </div>
</div>

/* 两列左侧自适应布局 */
.g-bd2{margin:0 0 10px;}
.g-sd2{position:relative;float:right;width:230px;margin-left:-230px}
.g-mn2{float:left;width:100%;;}
.g-mn2c{margin-right:240px;}

左侧自适应

右侧定宽

时间： 2024-08-22 00:24:41

两列左侧自适应布局的相关文章

两列右侧自适应布局

<div class="g-bd1 f-cb"> <div class="g-sd1"> <p>左侧定宽</p> </div> <div class="g-mn1"> <div class="g-mn1c"> <p>右侧自适应</p> </div> </div> </div> /* 两

高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了.大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情. 如果一个设计是固定宽度(非流体的宽度设计),那么实现多列等高效果是相当的容易.最好的技术就是使用Dan Cederholm的Faux

三列中间自适应布局--(来自网易)

<div class="g-bd5 f-cb"> <div class="g-sd51"> <p>左侧定宽</p> </div> <div class="g-mn5"> <div class="g-mn5c"> <p>中间自适应</p> </div> </div> <div class=&q

两列高度自适应（转）

相信很多人都非常喜欢用div+css布局,无论你是前端开发者,还是后台程序员,因为它的好处实在太多,可以用很少的代码来控制布局,然后用CSS表现其形态,表现和样式分离.而且在SEO方面,它还能提供30%的优化,我们何乐而不为呢. 很多人都会碰到如题的布局问题,解决方案很多,可以用背景图来填充,或用js来控制,但终不是最佳方案,最好还是从DIV,CSS本身来考虑: 以下为三行两列的的经典模式,还可以演变成多种布局,有待大家修改: <!DOCTYPE html PUBLIC "-//W3C//

两列定宽布局-（来自网易）

<div class="g-bd f-cb"> <div class="g-mn"> <p>左侧定宽</p> </div> <div class="g-sd"> <p>右侧定宽</p> </div> </div> <style> /* 两列定宽布局 */ .g-bd{width:950px;margin:0 auto

两列定宽布局

两列定宽布局方式的一个前提就是两列的盒模型宽度相加不能大于父元素的宽度,否则你懂得......错位了. 测试html页: <body> <div id="header"> 头部 </div> <div id="container"> <div class="mainBox"> 主要内容区域 </div> <div class="sideBox">

前端试题-两列等高布局

我们经常会见到一些小微网站上,左边是导航,右边是内容,无论是左边导航高度高还是右边内容高度高,两边始终以最高的来自适应等高显示. 这里的布局主要是把两边元素同时设两个比较大的padding-bottom,然后设置相等值的负的margin-bottom,最后给父元素加一个overflow:hidden. 比如上图有两列,一列高一列低,这里我们假设给左右都加上黄色部分高度padding-bottom:500px,如果不做其他处理的话,左边仍然没有右边高,分别加上不同背景色,左边和右边还是有差值,左边

两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高

代码: 效果图: 路人甲:OK?等高了?? 路人丙:不是吧? 路人乙:你这是在逗我? xiaomogg: 效果有点惨,不过这的确是已经做了登高处理的为什么"登高",看起来却不等高请留意代码处红框处 padding-bottom:99px; margin-bottom:-99px; 路人甲:这说明不了什么问题!! 路人乙:快进入主题吧路人丙:...................... xiaomogg: 其实"等高" 真的是不等高 1.如果把padding-b

右侧固定，左侧自适应布局（1）

HTML代码: <div class="content"> <ul> <li> <a href="#">  <div class="fl news_txt"> <div class="hdline ft16 pad_btm10">中俄将签订一揽子合作协议 </div> <p>应俄罗斯总