Привет. У меня есть приведенный ниже HTML-код. Внутри контейнера у меня есть заголовок, раздел и div.
С моим текущим CSS ниже div с классом rightSideDiv не отображается справа от элемента раздела.
Изменить h3 на display: block; , а затем добавьте float:left ; на оба ящика.
Если вы хотите, чтобы элементы div располагались бок о бок посредством плавания, перемещайте их в одном направлении.
rightSideDiv на 8 пикселей выше другого. Это потому, что граница в 4 пикселя добавляется поверх высоты. Рассмотрите возможность использования box-sizing: border-box; , из-за чего граница впитывается в заданную высоту, а не добавляется поверх нее.
Попробуйте вместо этого использовать flexbox и display:flex . С очень небольшими изменениями в css вы можете получить что-то вроде этого: https://jsfiddle.net/vnuz47va/2/
вы можете использовать float вправо и влево, чтобы выровнять свой div, однако ваш контейнер имеет ширину до 400, а ваши 2 div — 249+249 = 498, так что здесь проблема…
CSS. Все способы выравнивания элементов слева и справа. | Петр Шибицкий | 12 developer Labors
9 0002 Краткий урок истории, который, вероятно, знает большинство фронтенд-разработчиков. Но я этого не делал, поэтому решил поделиться. Кроме того, в конце есть небольшая хитрость, которая может удивить некоторых из вас.
Допустим, у нас есть следующие элементы для стиля.
И желаемый конечный эффект будет таким:
Надеюсь, что моих навыков PAINT достаточно, чтобы проиллюстрировать задачу. Два элемента слева и один элемент справа. Давайте посмотрим на наши варианты. 🙂 Код HTML находится внизу этой статьи.
Исторически, как это было сделано (и у вас все еще есть этот вариант). Вы можете использовать поплавки. Чтобы добиться того, чего вы хотите, вы можете обернуть div 1 и 2 в родительский div, и вот что вы получите:
Черная рамка — это граница родительского элемента div, которую вы должны добавить, а оранжевые — границы вокруг самих элементов.
Это будет работать, но есть 2 проблемы с этим подходом.
Один если один из элементов окажется больше контейнера, то он выйдет за его границы (ведь элемент плавающий, поэтому удаляется из нормального рендеринга DOM).
Поэтому мы должны применить clearfix.
Два без соответствующих медиа-запросов элементы начнут накладываться друг на друга. Если пользователь слишком сильно сжимает браузер.
Как я уже упоминал, обе проблемы имеют решение, но все же над этим нужно подумать. Но если вам нужно поддерживать какой-то древний браузер, вы должны делать то, что должны делать :(.
CSS
CSS 2.1:
И расширение предыдущей версии спецификации. Оно принесло свойство: positioning . Он может принимать несколько значений, но нас интересует следующее: абсолютное и относительное . Как это работает, это хорошо описано во всем Интернете. Поэтому я не буду пытаться изобретать велосипед.
Все, что мне нужно сделать, это установить относительное позиционирование на контейнере и абсолютное
на правой обертке (левая обертка будет автоматически выровнена по левому краю), а затем установить свойство right на 0. право. Эффект будет в основном таким же, как и выше, но нет необходимости в clearfix 9.0099 . Браузер автоматически изменит родительские размеры, чтобы они соответствовали всем дочерним элементам.
Однако элементы все равно будут перекрываться, если мы сузим окно браузера. Это хорошее решение. Он будет работать во всех браузерах. Но все же, давайте рассмотрим другие варианты.
Итак, в CSS3 мы получили новый способ позиционирования элементов, также известный как flexbox. Это мощный и интуитивно понятный инструмент. Об этом опять же написаны тома. Статью, которая мне больше всего нравится, можно найти по этой ссылке. Все, что мне нужно сделать, это поставить display: flex для элемента контейнера и добавьте
justify-content: space-between . Все это означает, что расстояние между дочерними элементами будет равным вдоль главной оси (по умолчанию это горизонтальная линия). А так как у нас всего два элемента (левый и правый), все работает. Поскольку даже пространство в случае всего двух элементов означает максимальное доступное пространство.
CSS
Опять же, это хорошее решение. Если вам не нужно поддерживать IE6. Так как элементы не будут перекрываться. Появится полоса прокрутки. Опять же, современный адаптивный дизайн должен учитывать это, но ошибки случаются, и, по крайней мере, таким образом контент все еще можно использовать.
Существует несколько способов снять шкуру с кошки. Особенно с флексбоксом. Предположим, что по каким-то базарным причинам вы не можете использовать обертку div. Все, что у вас есть, это дерево div, содержащее число (это хороший вопрос для интервью :)).
Опять же, мы можем использовать flex:1 для второго элемента. Это сокращенное обозначение flex: 1 0 auto; или вы можете просто написать flex-grow: 1 . Все это означает, что мы хотим, чтобы элемент 2 рос как можно больше без разрыва строки. Это, однако, имеет проблему, если вы хотите добавить эффект наведения на второй элемент, он будет размещен на всем большом элементе и может выглядеть или не выглядеть желательным.
<дел>
<дел>
<дел>
<дел>
право. Эффект будет в основном таким же, как и выше, но нет необходимости в clearfix 9.0099 . Браузер автоматически изменит родительские размеры, чтобы они соответствовали всем дочерним элементам.
Поскольку даже пространство в случае всего двух элементов означает максимальное доступное пространство.