0

我刚刚遇到了一个我最初认为很容易的问题。我可能只是在这里看不到简单的解决方案。

我所拥有的是：

__________________________________
|           parent block         |
| block1 | block2 |   textblock  |
----------------------------------

父块具有固定的最小宽度，但会适应浏览器的宽度。block1 和 block2 具有固定的宽度。textblock 里面有文本，应该占用此处可用的剩余空间......现在的问题是，textblock 的内容可能对于一行来说太多了，所以我希望它在 textblock 内显示多行。但是，由于我目前只是通过使用内联块来定位它们，因此文本块只会进入下一行。

通缉：

__________________________________
|           parent block         |
|        |        |some larger   |
| block1 | block2 |text that     |
|        |        |wraps arouind |
----------------------------------

但得到：

__________________________________
|           parent block         |
| block1 | block2 |              |
|some larger text that wraps     |
|around                          |
----------------------------------

我想盲桌会解决这个问题，但我真的尽量避免这样的事情......

一个简约的例子可能不是必需的，但在这里：

<!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>
4

2 回答 2

1

这是给你的JSFiddle。

魔法属性是：

float:left;

我希望这正是你想要的。

于 2013-10-21T17:39:27.047 回答
1

好吧，对于初学者，我将您的代码间隔了一点。我还注意到 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 中，以便所有内容都显示在一个内联块中而不是它们自己的块中。不确定这是否重要，但我是强迫症。使文本块显示为换行的主要是 30% 的宽度。由于您的主 div 占网页的 50%，因此您只需要将内部 div 加起来达到 50%。

希望这可以帮助！

于 2013-10-21T17:43:46.633 回答