左固定右边自适应

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .left{
                height: 300px;
                width: 200px;
                background: red;
                float: left;
                /*opacity: 0.5;*/
            }
            .right{
                height: 300px;
                background: blue;
                margin-left: 200px;
                /*width: 100%;*/
            }
            .main{
                width: 80%;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
</html>

时间： 2024-10-05 12:30:40

左固定右边自适应的相关文章

如何布局左固定右边自适应的两列布局？

一,左侧div,float设为left,右侧div设置margin-left属性为左侧div的宽度,外div清除浮动 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style type="text

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

左边宽度固定右边自适应

在写页面布局的时候经常要用到左边宽度固定右边自适应第一种写法: .left { position: absolute; height: 100%; width: 300px; background-color: blue; } .right { height: 100%; margin-left: 300px; background-color: red; } 这种写法有个问题,right的宽度是占满整个屏幕,如果right想实现拖拽功能,发现拖拽到左边300像素的时候,不能在往往左边拖拽了,

div css左边固定右边自适应布局

web前端开发之布局:先看效果图,最简单的左右布局.有可能还会被面试问道哈哈哈.一看也没什么特别之处,就是左边固定,右边自适应,就这么简单. 原理:通过设置一个margin-left;或者margin-right就可以搞定.方法有很多,这次就只介绍这种设置margin的. 代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document&

左边固定右边自适应的布局

下方内容可直接copy查看效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0px; padding: 0px; box-sizing: border-box; } .left{ width: 80px; heigh

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

<!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

html-v12.25+课堂小练习-布局左固定右自适应

存在一个问题就是当屏幕缩小至一定宽度的时候,边框栏会被挤开 1 body { 2 font-family: 'Amarante', cursive; 3 background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat; 5 } 6 7 .wrapper { 8 margin: 0 auto; 9 } 11 .header-wrapper{ 12 background-color: #BD9C8C; 13

网页布局，左固定右自适应宽

左边固定右边自适应的等高布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0; padding: 0; } #left { float: left; width: 220px; margin-right: -100%; } #content {flo