CSS-Resize内联块填充剩余空间 [英] CSS-Resize inline-block fill remaining space on line
问题描述
当第二个内联块容器改变大小(基于删除或添加的innerHtml)时,是否可以(仅使用css)调整内联块容器的大小以填充行上的所有额外空间?
Is it possible (using only css) to resize an inline-block container to fill all of the extra space on a line when the second inline block container changes size (based on innerHtml being removed or added)?
|---Div-------------------------------------------|
||-Box 1--------------------------||-Box 2-------||
|| width:fill || width:200px ||
|| || ||
||--------------------------------||-------------||
|-------------------------------------------------|
|---Div-------------------------------------------|
||--Box 1-------------------------------------||-||
|| width:fill || || Box 2 - width:10px
|| || ||
||--------------------------------------------||-||
|-------------------------------------------------|
代码:
Code:
...
<div>
<span id="sp1" style="display:inline-block;width:?;">
<textarea style="width:100%;" rows="6"></textarea>
</span>
<span id="sp2" style="display:inline-block;width:auto;">
<textarea style="width:150px;" rows="6"></textarea>
</span>
</div>
...
<script type="text/javascript">
function x() {
document.getElementById('sp2').innerHtml = '';
}
</script>
...
因此,当调用函数'x'时,span'sp2'调整为基本上为0px,我希望span'sp1'调整大小以适合div的宽度。稍后当调用另一个函数时,textarea将被放回并且我希望span'sp1'再次调整大小并填充剩下的行。
我不想使用JavaScript来调整大小什么,我想把它保存在CSS中。
这些容器也不需要保持相同的显示类型,它们不必是内联的 - 块。
-Kyle
So when the function 'x' is called, the span 'sp2' resizes to basically 0px and I want the span 'sp1' to resize to fit the width of the div. Later when another function is called the textarea will be put back in and I want the span 'sp1' to resize again and fill the rest of the line.
I don't want to use JavaScript to resize anything, I want to keep that in CSS.
And these containers don't need to stay the same display type either, they don't have to be inline-block.
-Kyle
推荐答案
您可以使用表格获得该效果两个内联块。您可能已经注意到,如果您为列宽创建一个未指定大小的表,它会自动调整大小到它认为最合适的大小。
您的问题最初是误导性的:你只想使用CSS,但是你在你的函数中使用了javaScript / DOM。
通过AJAX重新创建区域为我做了这个,当然表。你修复了表格的宽度,并且列对抗它。
You may be able to get that effect using a table as your two inline blocks. You may have noticed that if you create a table with unspecified sizes for the column widths that it auto-sizes to what it believes to be a best fit.
Your question is initially misleading: you only want to only use CSS, but you are using javaScript/DOM in your function.
Recreating regions via AJAX does this for me, certainly with tables. you fix the width of the tables and the columns fight it out.
我迫切需要一个可变宽度和高度的解决方案。这个确实!
这是基于这个问题。
I desperately needed a solution that works with variable widths and heights. This one does!
It is based on the answer to this question.
<div class="container">
<span class="left">
As much space as<br>you<br>want
</br></br></span>
<span class="right">
Minimal width
</span>
</div>
<无线电通信/>
.container {
display: table;
}
.left {
display: table-cell;
width: 100%;
}
.right {
display: table-cell;
}
.container * {
border: 1px solid black; /* for the demo */
}
小提琴演示
如果你想要最小化 width在示例中位于同一行,使用
Fiddle demo
If you want "Minimal width" in the example to be on the same line, use
white-space: nowrap;
这篇关于CSS-Resize内联块填充剩余空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!