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屋！