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

<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;}
.g-sd{float:right;width:230px;}
.g-mn{float:left;width:710px;}

</style>

左侧定宽

右侧定宽

时间： 2024-10-08 13:46:07

两列定宽布局-（来自网易）的相关文章

两列定宽布局

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

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

<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

两列布局（一列定宽，一列自适应）

用table+table-cell实现两列布局(一列定宽,一列自适应,且table是自动的两列自动登高) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .pare

两列布局，一列定宽，一列宽度自适应

方法一: body{ margin: 0;}.container{ height: 300px; overflow: hidden;}.left{ width: 200px; height: 300px; background: red; position: absolute; left:0; top: 0;}.right{ margin-left:200px; width: 100%; height: 300px; background: green;} <div class="cont

多列布局之一列、多列定宽及一列自适应布局

命题: <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> 问题一:一列定宽及一列自适应 方案1: .left{ flo

两列右侧自适应布局

<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> /* 两

两列左侧自适应布局

<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> /* 两

任意列+左右两列等高布局，并要求有最小高度

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

布局-两列布局（一列定宽，一列自适应）

结构: 1 <div class="parent"> 2 <div class="left"> 3 <p>left</p> 4 </div> 5 <div class="right"> 6 <p>right</p> 7 <p>right</p> 8 </div> 9 </div> 样式: 1.解决方案一: