Как заставить дочерние отделения всегда соответствовать внутреннему родительскому отделению?

Question

Как заставить дочерние отделения всегда соответствовать внутреннему родительскому отделению?

В текстовой области, как во входе формы, тогда просто будет работать повреждение нормали:

<textarea>
This is a text area
line breaks are automatic
</textarea>

, Если Вы говорите об обычном тексте на странице, < br/> (или просто < br> при использовании простого 'ole HTML4), разрыв строки.

Однако я сказал бы, что Вы часто на самом деле не хотите разрыв строки. Обычно, Ваш текст разделяется в абзацы:

<p>
  This is some text
</p>
<p>
  This is some more
</p>

, Который намного лучше, потому что это дает ключ к разгадке относительно того, как Ваш текст структурирован к машинам, которые читают его. Машины, которые читают его, включают программы экранного доступа для слабовидящего или слепого, отделяющегося текста в абзацы, дает ему шанс того, чтобы быть представленным правильно этим пользователям.

50

html css parent

задан fubar 29 May 2018 в 12:05

5 ответов

Другие вопросы по тегам:

html css parent

Похожие вопросы:

score 1 · Answer 1

Если я вас правильно понял, самый простой метод - это переместить дочерние элементы. Например:

#one { width: 500px; height: 1%; overflow: hidden; background: red; }
#two { float: left; width: 250px; height: 400px; background: aqua; }
#two { float: left; width: 250px; height: 200px; background: lime; }

Установка размера (высота / ширина) и переполнения на автоматический или скрытый для родительского элемента приводит к тому, что он будет содержать любые плавающие дочерние элементы.

Обратите внимание, что overflow: hidden; может иногда вызывать проблемы с отключением контента, и в этом случае вы можете попробовать этот альтернативный метод:

http://www.positioniseverything.net/easyclearing.html

score 4 · Answer 2

Для ширины просто удалите правило width: 100% . По умолчанию div растягивается до размеров родительского контейнера.

Высота не так уж и проста. Вы можете сделать что-то вроде трюка столбца с одинаковой высотой .

html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:500px;height:300px; overflow: hidden;}
#two {height:50px;}
#three {width:100px; padding-bottom: 30000px; margin-bottom: -30000px;}

score 1 · Answer 3

вы можете использовать наследование

#one {width:500px;height:300px;}
#two {width:inherit;height:inherit;}
#three {width:inherit;height:inherit;}

score 9 · Answer 4

В вашем примере вы не можете: поле 5 пикселей добавлено в ограничивающую рамку div # two и div # three фактически делает их ширину и высоту 100% родительских + 5 пикселей, которые будут переполняться.

Вы можете использовать padding в родительском элементе, чтобы обеспечить 5 пикселей пространства внутри его границы:

<style>
    html, body {width:100%;height:100%;margin:0;padding:0;}
    .border {border:1px solid black;}
    #one {padding:5px;width:500px;height:300px;}
    #two {width:100%;height:50px;}
    #three {width:100px;height:100%;}
</style>

РЕДАКТИРОВАТЬ: При тестировании удаление width: 100% из div # два фактически позволит ему работать должным образом, поскольку div s блочного уровня и по умолчанию всегда заполняет ширину своих родителей. Это должно очистить ваш первый случай, если вы хотите использовать маржу.

score 2 · Answer 5

В завершение, я думаю, ответ на этот вопрос заключается в том, что решения нет. Единственный способ добиться желаемого поведения - использовать javascript.