Адаптируйте ширину 3-го блока подряд с помощью CSS

Question

Адаптируйте ширину 3-го блока подряд с помощью CSS

0

Я просто пришла к проблеме, о которой я сначала подумал легко. Я просто не вижу здесь простого решения.

У меня есть:

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

Родительский блок имеет фиксированную минимальную ширину, но в остальном адаптируется к ширине браузера. block1 и block2 имеют фиксированную ширину. 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>

Julian 21 окт. 2013, в 19:56

Источник

Теги:

html

css

tablelayout

2 ответа

Ещё вопросы

Dodekeract · Answer 1 · 2013-10-21T15-59-00.000Z

1

Вот вам JSFiddle.

Магический атрибут:

float:left;

Надеюсь, это именно то, что вы хотели.

Dodekeract 21 окт. 2013, в 15:59

0

Мне нравится ваш ответ лучше, чем мой, для протокола.
usernolongerregistered 21 окт. 2013, в 17:52
0

Благодарю. ;) Надеюсь, @Julian тоже понравится.
Dodekeract 21 окт. 2013, в 18:02
0

Как именно это поведение отличается от того, чтобы заставить все display=inline-block ? если я сделаю контейнер этих трех блоков слишком маленьким, они также просто сделают вторую строку. Я, вероятно, не очень хорошо выразил это, но я хочу, чтобы 3-й блок адаптировался к размеру контейнера, поэтому текст обернут внутрь, если 3-й блок слишком мал. но при любом размере родительского контейнера он все равно должен быть одной строкой (при условии, что ширина всегда достаточна для отображения хотя бы одного слова 3-го блока) ...
Julian 21 окт. 2013, в 19:28
0

Я не очень понимаю, что вы хотите получить. Если бы вы могли мне это объяснить, я думаю, что смогу сделать это. Вы хотите фиксированную высоту для 3-го блока? Вы немного сбиваете с толку.
Dodekeract 22 окт. 2013, в 00:02

Показать ещё 2 комментария

usernolongerregistered · Answer 2 · 2013-10-21T15-09-00.000Z

Что ж, для начала я немного расставил ваш код. Я также заметил, что div.textblock не присваивал атрибуту class= 'textblock', потому что textblock был span, а не 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>

Я завернул все это в div класса.wrap, чтобы все отображалось в одном встроенном блоке, а не в своем собственном. Не уверен, что это даже имеет значение, но я OCD. То, что в основном делает отображение текстового блока в виде обертки, составляет 30% ширины. Поскольку ваш основной div составляет 50% веб-страницы, вам просто нужно сделать, чтобы ваши внутренние div составляли до 50%.

Надеюсь это поможет!

Спасибо за ваш комментарий! проблема в том, что у меня есть кнопки, селекторы и прочее в первых двух кнопках, так что фиксированная ширина была бы действительно хорошей ... оставшееся место ... Но спасибо за исправление css-проблемы
А ну понятно. У меня проблема с не думать заранее, ха-ха. Нет проблем с CSS, хотя! :)