Сжать границу HTML-элемента, который делит пространство с плавающим элементом
Когда плавающий элемент занимает некоторое пространство, «обычный» текст освобождает место для размещения плавающего элемента. Но граница вокруг обычного текста не пересекается с плавающим элементом.
Как в приведенном ниже примере сделать так, чтобы первый красный прямоугольник заканчивался до того, как синий прямоугольник начнется с некоторым зазором, а не перекрывался? И пусть второй красный квадратик, которому не нужно делить пространство с плавающим элементом, всё равно занимает 100%?
div#toc {
float: right;
width: 300px;
padding: 20px;
border: 1px solid blue;
}
div.warn {
padding: 20px;
border: 1px solid red;
}<div id = "toc">
<h2>Table of contents</h2>
<ol>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ol>
</div>
<div id = "main">
<h1>Chapter 1</h1>
<p>In the beginning ...</p>
<div class = "warn">
Fairy tale, watch out!
</div>
<p>... and were married happily ever after.</p>
<div class = "warn">
Don't retell!
</div>
</div>Почему? Потому что я хочу, чтобы поле «Предупреждение» имело красную рамку.
Хотя что еще нужно сделать? Должна ли она иметь ширину 100 % от «всего существующего пространства» или это может быть обычный встроенный текстовый блок?
Я не думаю, что понимаю вопрос. Если есть фон, он также должен сжаться до доступного пространства. Если есть другие элементы, такие как imgs, они, вероятно, также должны сжиматься, хотя сейчас у меня нет в этом необходимости. Моя основная потребность — обычный текст с рамкой.
Похоже, то, что вы хотите, — это одна из тех вещей, которые не может сделать стандартная блочная модель CSS. Вы могли бы взглянуть на сетку CSS и, в частности, на ее макет, но это все еще экспериментально, так что вам, возможно, придется просто обратиться к решению JS здесь (для этого существует ряд библиотек, использующих ту же «кладку кладки»). " срок). Если, конечно, это не касается уже написанного вами конкретного контента и вы просто хотите, чтобы он хорошо выглядел. В этом случае нет ничего плохого в том, чтобы просто адаптировать CSS к конкретному контенту.
Ответы 1
Блоки уровня блока, которые устанавливают независимый контекст форматирования, сжимаются, чтобы избежать плавающих элементов. Самый прямой способ заставить блок установить контекст форматирования блока (в данном случае это наиболее подходящий тип независимого контекста форматирования) — дать ему display: flow-root.
Используйте margin на поплавке, чтобы создать зазор.
div#toc {
float: right;
width: 300px;
padding: 20px;
border: 1px solid blue;
margin-left: 10px;
}
div.warn {
padding: 20px;
border: 1px solid red;
display: flow-root;
}<div id = "toc">
<h2>Table of contents</h2>
<ol>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ol>
</div>
<div id = "main">
<h1>Chapter 1</h1>
<p>In the beginning ...</p>
<div class = "warn">
Fairy tale, watch out!
</div>
<p>... and were married happily ever after.</p>
<div class = "warn">
Don't retell!
</div>
</div>Всегда есть еще одно ключевое слово CSS, о котором я никогда не слышал! И оно это делает!!
Первым вопросом будет «почему?», потому что текст внутри этого div будет делать именно то, что должен (при необходимости переноситься для размещения плавающего элемента).