如何在两个div之间制作div的宽度 [英] How to make a div's width stretch between two divs
本文介绍了如何在两个div之间制作div的宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
< div id =contains>
< div id =left> 1< / div>
< div id =filler>< / div>
< div id =right> 2< / div>
< / div>
CSS
#left {
text-decoration:none;
display:inline-block;
float:left;
width:auto;
padding:0px 20px 0px 20px;
height:45px;
text-align:center;
line-height:300%;
背景:#FF9000;
颜色:#FFFFFF;
}
#navFiller {
display:inline-block;
位置:固定;
float:left;
width:auto;
height:45px;
背景:#FF9000;
}
#right {
text-decoration:none;
display:inline-block;
float:right;
width:auto;
padding:0px 20px 0px 20px;
height:45px;
text-align:center;
line-height:300%;
背景:#FF9000;
颜色:#FFFFFF;
}
#contain {
width:100%;
height:45px;
padding:0;
保证金:0;
display:inline;
项目简介:
解决方案
如果在浮动元素之后添加您的填充元素,然后稍微改变它的样式(包括给样式块设置正确的id),您可以获得你需要:
#left {display:inline-block;向左飘浮; padding:0px 20px 0px 20px;身高:45px; text-align:center;行高:300%;背景:#FF9000; color:#FFFFFF;}#filler {display:block; float:none;身高:45px;背景:#F00;}#right {display:inline-block; float:right; padding:0px 20px 0px 20px;身高:45px; text-align:center;行高:300%;背景:#FF9000;颜色:#FFFFFF;}#包含{宽度:100%;身高:45px;填充:0;保证金:0; display:inline;}
< div id =contains > < div id =left> 1< / div> < div id =right> 2< / div> < div id =filler> m< / div>< / div>
或模拟一个表格:
#contain {width: 100%;填充:0;保证金:0;显示:表格; } #left,#right {text-decoration:none; display:table-cell;宽度:5%; text-align:center;背景:#FF9000;颜色:#FFFFFF;填充:2%0; } #filler {display:table-cell;宽度:自动;背景:#F00; }
< div id =contains> < div id =left> 1< / div> < div id =filler> m< / div> < div id =right> 2< / div>< / div>
两种方法都有其优点。这取决于你,这是适合你的。
My current problem is that I have three div elements; one floated left, one floated right, and one between those two. I want the center div to automatically stretch to the max width of the width available between the two divs.
HTML
<div id="contain">
<div id="left">1</div>
<div id="filler"></div>
<div id="right">2</div>
</div>
CSS
#left {
text-decoration: none;
display: inline-block;
float: left;
width: auto;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#navFiller {
display: inline-block;
position: fixed;
float: left;
width: auto;
height: 45px;
background: #FF9000;
}
#right {
text-decoration: none;
display: inline-block;
float: right;
width: auto;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#contain {
width: 100%;
height: 45px;
padding: 0;
margin: 0;
display: inline;
}
Jsfiddle of project:
解决方案
If you add your filler element after the floated elements, and then change up its styles a little bit (including giving the style-block the correct id), you can get what you're going for:
#left {
display: inline-block;
float: left;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#filler {
display: block;
float: none;
height: 45px;
background: #F00;
}
#right {
display: inline-block;
float: right;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#contain {
width: 100%;
height: 45px;
padding: 0;
margin: 0;
display: inline;
}
<div id="contain">
<div id="left">1</div>
<div id="right">2</div>
<div id="filler">m</div>
</div>
OR, simulate a table:
#contain {
width: 100%;
padding: 0;
margin: 0;
display: table;
}
#left,
#right {
text-decoration: none;
display: table-cell;
width: 5%;
text-align: center;
background: #FF9000;
color: #FFFFFF;
padding: 2% 0;
}
#filler {
display: table-cell;
width: auto;
background: #F00;
}
<div id="contain">
<div id="left">1</div>
<div id="filler">m</div>
<div id="right">2</div>
</div>
Both methods have their benefits. It's up to you which is right for you.
这篇关于如何在两个div之间制作div的宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文