左边DIV固定宽度,右边的DIV如何自适应填满剩下的屏幕宽度

    <style>
        .main{
            margin-top: -20px;
            width: 100%;
            height: auto;
            overflow: hidden;
        }
        .main .left{
            float: left;
            width: 300px;
            height: 700px;
            border-right: 1px solid #DDDDDD;
        }
        .main .right{
            margin-left: 300px;
            height: 700px;
            background-color: red;
        }
    </style>
时间: 2024-11-10 14:45:14

左边DIV固定宽度,右边的DIV如何自适应填满剩下的屏幕宽度的相关文章

css能不能实现左边div固定宽度,右边div自适应撑满剩下的宽度?

利用bfc: .left{ width:200px; float:left; } .right{ overflow:hidden; } 补充一下:BFC翻译过来是块级格式化上下文,和haslayout比较相似,但haslayout是旧版本IE下的一个专有属性,表示元素自己对自身的内容进行组织和计算.BFC相当于一个独立的渲染单元,内外元素不会相互影响.我这里overflow:hidden触发BFC,利用的是BFC布局的一条特性,就是BFC的区域不会与浮动盒子重叠. 作者:lyhper链接:htt

假如有一高度自适应的div,父元素高度600px,里面有两个div,一个高度100px,希望另一个填满剩下的高度

原文地址:https://www.cnblogs.com/yuanyuan-1994/p/8984473.html

两列布局,左边div固定宽度,右边宽度自适应

<!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"> <head> <meta http-equiv="Cont

实现左边div固定宽度,右边div自适应

(1)使用float <div class="use-float"> <div></div> <div></div> </div> .use-float>div:first-child{ width:100px; float:left; } .use-float>div:last-child{ overflow:hidden; } - - - - - - - - - - - - - - - - - -

css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中(文字高度超过图片,图片跟随文字居中,反之文字跟随图片居中非table实现)

<!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"><head><meta http-equiv="Content-Typ

左边固定,右边自适应常见方式总结

左边固定,右边自适应常见方式总结 html结构如下: <div class="parent"> <div class="left">我是左边固定</div> <div class="right">我是右边自适应</div> </div> (1)左边向左浮动并固定宽度,右边给margin-left    (注:右边这个div一定不能给width:100%) .parent{ w

二列div固定宽度

二列div固定宽度:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在div+css布局中经常会用到两列固定宽度的div,一般用来对页面的功能区域的划分.之前已经介绍了一列div固定宽度,下面简单介绍一下如何让两列div并列显示,并且宽度是固定的.其实原理很简单,就是给两个div以固定的宽度,然后让他们并列显示.代码: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <

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

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

左边定宽 右边自适应的写法

<html><head> <title>左边定宽 右边自适应</title> <meta charset="utf-8"> <style type="text/css"> .left{float: left;width: 200px;margin-right: -100%} .content{float: left;width: 100%;} .contentInside{margin-left