我刚刚谈到一个我首先想到的简单问题。我可能在这里看不到简单的解决方案。
我有的是:
__________________________________
| parent block |
| block1 | block2 | textblock |
----------------------------------
父 block 具有固定的最小宽度，但会适应浏览器的宽度。 block1 和 block2 具有固定宽度。 textblock 里面有文本，应该占用这里剩余的可用空间...... 现在的问题是，文本 block 的内容对于一行来说可能太多了，所以我希望它在文本 block 中显示多行。 但是，由于我目前只是通过使用内联 block 来定位它们，所以文本 block 只是进入下一行。
想要:
__________________________________
| parent block |
| | |some larger |
| block1 | block2 |text that |
| | |wraps arouind |
----------------------------------
但得到了:
__________________________________
| parent block |
| block1 | block2 | |
|some larger text that wraps |
|around |
----------------------------------
我想盲 table 可以解决这个问题，但我真的尽量避免这样的事情......
一个简单的示例可能不是必需的，但是这里:
<!DOCTYPE html><html><head><style type='text/css'>
h2.wrapper{width:50%;min-width:200px;background-color:#aff;}
div.block1{vertical-align:middle;width:50px;background-color:#faf;display:inline-block;height:50px;}
div.block2{vertical-align:middle;width:50px;background-color:#ffa;display:inline-block;height:50px;}
div.textblock{width:auto;background-color:#afa;display:inline-block;vertical-align:middle;}
</style></head><body><h2 class='wrapper'>
<div class='block1'>block1</div>
<div class='block2'>block2</div>
<span class='textblock'>some larger text that wraps around</span>
</h2></body></html>
最佳答案
好吧，首先，我将您的代码隔开一点。我还注意到 div.textblock 没有给出 class='textblock' 它的属性，因为 textblock 是一个跨度，而不是一个 div。
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
h2.wrapper{width:50%;min-width:200px;background-color:#aff;}
.block1{vertical-align:middle;width:10%;background-color:#faf;display:inline-block;height:50px;}
.block2{vertical-align:middle;width:10%;background-color:#ffa;display:inline-block;height:50px;}
.textblock{width:30%;background-color:#afa;display:inline-block;vertical-align:middle;}
div.wrap{display:inline-block;white-space:wrap;}
</style>
</head>
<body>
<h2 class='wrapper'>
<div class="wrap">
<div class="block1">block1</div>
<div class="block2">block2</div>
<span class="textblock">some larger text that wraps around</span>
</div>
</h2>
</body>
</html>
我将其全部包装在一个 .wrap 类 div 中，以便所有内容都显示在一个内联 block 中而不是它们自己的 block 中。不确定这是否重要，但我是强制症。使文本 block 显示为换行的主要原因是 30% 的宽度。由于您的主 div 占网页的 50%，因此您只需将内部 div 加起来达到 50%。
希望这对您有所帮助!
关于html - 使用 CSS 调整一行中第三个 block 的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19500980/