DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度，怎么解决？

dajbd 2013-02-28 11:19:56

[color=#FF0000]DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度，怎么解决？

我是新手，求指导！
谢谢各位挨踢人士。
[/color]

...全文

2317 18 打赏收藏转发到动态举报

写回复

用AI写文章

18 条回复

切换为时间正序

请发表友善的回复…

发表回复

shaoyezwx 2015-10-09

打赏
举报

左右两个DIV浮动，一左一右；中间那个DIV居中

moon_hover 2015-09-21

打赏
举报

在4楼的基础上还要为右边的div添加top：0，否则，最右侧的div会掉下来

lsn丶 2015-05-20

打赏
举报

/*使用css3 经本人测试有效*/ .listItem { width: 100%; display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;list-style:none; -webkit-box-align:center;-moz-box-align:center;-o-box-align:center;-ms-box-align:center;box-align:center; height: 100px; border-bottom: 1px solid #555; } .listItem_img { width: 50px; height: 100%; } .listItem_text { height: 100%; -webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1; /**设置子div宽度，占父元素剩余宽度的比例*/ } .listItem_action { width: 100px;height: 100%; }

明天一样精彩 2014-02-22

打赏
举报

<span>test_page</span>

seliants 2013-03-16

打赏
举报

三个层都设置左浮动，然后宽度100%就行了，太常用了

青出于蓝 2013-03-12

打赏
举报

学习到了，oggmm的方法不错。

酣酣 2013-03-12

打赏
举报

不错不错！受教了！

痞子wu情 2013-03-12

打赏
举报

引用 4 楼 oggmm 的回复:

这是比较典型的一个三栏布局给你思路吧左右两个可以用绝对定位让他们分别left:0;和right:0; 然后中间的元素不定宽度让他们的margin-left和margin-right分别对应左右两栏的宽度就好了

好办法 +1

AdversityRebirth 2013-03-12

打赏
举报

oggmm的思路非常好，学习了

Millor 2013-03-06

打赏
举报

同意oggmm的做法。 .r,.l{width:150px} .c{margin-left:150px;margin-right:150px}

BlackRian 2013-03-05

打赏
举报

第一反应是脚本算宽度，不过4楼的方法蛮好的

oggmm 2013-03-05

打赏
举报

这是比较典型的一个三栏布局给你思路吧左右两个可以用绝对定位让他们分别left:0;和right:0; 然后中间的元素不定宽度让他们的margin-left和margin-right分别对应左右两栏的宽度就好了

await2013 2013-03-05

打赏
举报

第一反应是table...

我自是年少-韶华倾负 2013-03-01

打赏
举报


<style type="text/css">
div{
    border:1px solid;
    height:100px;
}
.left{
    float:left;
    width:150px;
height:100%;
}
.right{
    float:right;
    width:150px;
height:100%;
}
.center{margin:0 160px;
height:100%;} 
</style>
<div>
    <div class="left">left</div>   
    <div class="right">right</div>
    <div class="center">center</div>
</div>

bbjbepzz 2013-02-28

打赏
举报


<style type="text/css">
div{
	border:1px solid;
	height:100px;
}
.left{
	float:left;
	width:150px;
}
.right{
	float:right;
	width:150px;
}

</style>
<div>
	<div class="left">left</div>	
	<div class="right">right</div>
	<div class="center">center</div>
</div>