两列布局,左边固定,右边自适应的三种方法

    <!-- 方法一:使用CSS3属性calc()进行计算。注意:calc()里的运算符两边必须有空格 -->
    <div>
        <div style="float:left;width:200px;height:500px;background-color:blue;">

        </div>
        <div style="float:left;width:calc(100% - 200px);height:500px;background-color:red;">

        </div>
    </div>

    <div style="clear:both;">
        <br>
    </div>

    <!-- 方法二:使用margin负值,使右边容器与左边同一行,并100%宽。再在右边容器中放一个子容器,设置margin-left值为左边容器的宽度。 -->  <!-- 使用负margin,浏览器会认为这个元素的大小变小了,所以会改变布局,布局会按照元素的大小减去负margin的大小进行布局;然而实际上却没有变小,所以布局变化后显示的大小还是原大小。详情:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 -->

    <div>
        <div style="float:left;width:200px;height:500px;background-color:blue;">

        </div>
        <div style="float:left;width:100%;height:500px;-background-color:red;margin-left:-200px;">
            <div style="margin-left:200px;background:yellow;height:500px;">

            </div>
        </div>
    </div>

    <div style="clear:both;">
        <br>
    </div>

    <!-- 方法二:使用position,右边容器必须设置right -->
    <div style="position:relative;">
        <div style="position:absolute;left:0;width:200px;height:500px;background-color:blue;">

        </div>
        <div style="position:absolute;left:200px;right:0px;height:500px;background-color:red;">

        </div>
    </div>
时间: 2024-10-05 15:30:04

两列布局,左边固定,右边自适应的三种方法的相关文章

css布局两边固定中间自适应的四种方法

第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法. 代码如下: <div style="width:100%; margin:0 auto;"> <div style="width:200px; float:right; background-color:#960">这是右侧的内容 固定宽度</div> <div style="width:150px; float:left

双栏布局 左边固定右边自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

俩列布局(左边固定,右边自适应),等高布局,最小高度

俩列布局(左边固定,右边自适应): 1. <!DOCTYPE html> <html> <head> <title>俩列布局</title> <meta charset="utf-8"> <style type="text/css"> *{         margin: 0;         padding: 0;     } #left {         float: left

解决左边固定右边自适应宽度的方案

上一篇文章中有提及过很多web前端开发者用float+margin+position:absolute来实现表单内容的左边文字固定右边的输入框自适应宽度的问题,当然,这个问题我也在百度中搜索过,基本搜索出来的答案都是这样描述的,我也在上一篇文章中提出过浮动和绝对定位属于脱离文档流布局,是会损耗性能的,但是百度中却没有给出我所想表达出的解决方案,所以不得不在此将该方案具体的描述清楚. 首先,我需要介绍的是display:box这个属性,它是今天弹性布局的主角,虽然它有个更加强大的弟弟display

CSS 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题

一: 右侧固定宽度 左侧自适应  第一种方法:左侧用margin-right,右侧float:right  就可以实现.     HTML代码可以如下写:    <div>        <a href="" target="_blank">我是龙恩</a>    </div> <div>        <a href="" target="_blank">

二列布局 左边固定宽度 右边响应

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>二列布局 左边固定宽度 右边响应</title> <style> html{ height: 100%; } body{ height: 100%; margin: 0; padding: 0; } .left{ width: 200px; heig

flex左右布局 左边固定 右侧自适应

flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: <div class="item"> <div class="l">LEFT</div> <div class="r"> <div class="title">OMG OMG

CSS3实现了左右固定中间自适应的几种方法

1,弹性盒(flex)布局 中间 .center 区域设置    flex-grow: 1 或者 width: 100% .container { width: 100%; min-height: 200px; background-color: red; display: flex; } .container .left { width: 200px; height: 200px; background-color: purple; } .container .right { width: 1

mfc 在VC的两个对话框类中传递参数的三种方法

弄了好久,今天终于把在VC中的对话框类之间传递参数的问题解决了,很开心,记录如下: 1. 我所建立的工程是一个基于MFC对话框的应用程序,一共有三个对话框,第一个对话框为主对话框,所对应的类为CTMDDDlg类.在主对话框上我放置了一个标签页(Tab Control)控件,其实现的功能是当单击标签提示A时进入页面A,即对话框A(所对应的类为CDialogChild1),单击B时进入对话框B(CDialogChild2). 整个工程的框架已经设计好了,在对话框A和对话框B上放置了许多控件,现在我想