实现左边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;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

(2)使用table

<table class="use-table">
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
.use-table{
    border-collapse:collapse;
    width:100%;
}
.use-table>tbody>tr>td:first-child{
    width:100px;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

(3)用div模拟table

<div class="use-mock-table">
    <div></div>
    <div></div>
</div>
.use-mock-table{
    display:table;
    width:100%;
}
.use-mock-table>div{
    display:table-cell;
}
.use-mock-table>div:first-child{
    width:100px;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

(4)使用flex

<div class="use-flex">
    <div></div>
    <div></div>
</div>
.use-flex{
    display:flex;
}
.use-flex>div:first-child{
    flex:none;
    width:100px;
}
.use-flex>div:last-child{
    flex:1;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

效果图:(在以上样式基础上,我又加了高度和边框,才能看到下面的样子。。。)

时间: 2024-10-09 00:35:03

实现左边div固定宽度,右边div自适应的相关文章

布局(左边的div随着右边div的高度变化而变化)

今天同学问了一个左边div的高度随着右边div的高度变化而变化的问题.开始想了想有点蒙.中间试着用height:100%:试过发现并不可行,因为高度百分比必须有确切的祖先元素(即设置了px)才可以.由于今天晚上正在团建,回来都12点多了.然后怎么也睡不着就做做这个吧,发现一坐下来安心的想问题,竟然迎刃而解了. 我用到的方法是1父元素设置position:relative;2左边的div设置position:absolute;top:0;bottom:0;这个也是css3中flex布局的实现原理.

两列布局,左边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

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

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

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

div中iframe高度自适应问题

网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外部div的宽度和高度? 我自己做的时候出现的问题是:当ifame的width和height设置为100%时,iframe会被挤出div,下滑到div的下面.然后我试了很多网上说的也没有解决,然后加了个东西就不会出现那种情况了 下面为我的div的js设置 //window.onresize表示窗口触发