CSS:在同一行上有3个div,中间的一个占用剩余空间 [英] CSS: Having 3 div on the same line with the middle one taking the remaining space
本文介绍了CSS:在同一行上有3个div,中间的一个占用剩余空间的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在建立一个工具栏,我想在下面的例子中的黄色部分取整个空格(白色):
I'm building a toolbar, I'd like the yellow part in the following example to take the whole space left (in white):
<div class="left"> Some content </div>
<span class="middle"> This should fill the space left </span>
<div class="right"> Some other content </div>
与css:
.left {
float: left;
background-color: #ddd;
display: inline-block;
}
.middle {
background-color: yellow;
display: inline-block;
}
.right {
float: right;
background-color: #ddd;
display: inline-block;
}
编辑:左侧和右侧的内容是动态的,更改,因此我不想在其上设置宽度。
the content of left and right is dynamic, it can change, so I don't want to set width on them
推荐答案
我不知道这是否适合您因为轻微的HTML更改:
I don't know if that suits you because of a slight HTML change:
<div class="left"> Some content </div>
<div class="right"> Some other content </div>
<span class="middle"> This should fill the space </span>
但我相信这是你想要的,
But I believe it is what you want,
CSS:
.left {
float: left;
background-color: #ddd;
}
.middle {
background-color: yellow;
display: block;
overflow:hidden;
}
.right {
float: right;
background-color: #ddd;
}
DEMO:http://jsfiddle.net/pavloschris/MWjGH/12/
这篇关于CSS:在同一行上有3个div,中间的一个占用剩余空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文