не плохо себя чувствовать, что вы не поняли макет CSS еще - это было долгое время, прибывая с точки зрения поддержки стандартов, поэтому большинство методов сегодня используют несколько Hacky методы для того чтобы достигнуть это, и это не всегда само собой разумеется, как они работают или почему.
Блоки по умолчанию стек вертикально, поэтому вы хотите изменить поток для горизонтальной работы для определенной части.
Правильный «современный способ CSS» должен был бы использовать flexbox, который специально является инструментом компоновки для этих типов ситуаций (и более). Предостережение - поддержка браузера - IE10 и выше, но в остальном большинство браузеров поддерживают его.
Чтобы выложить что-то горизонтально с помощью flexbox, вы должны сообщить родителям, что он станет контейнером, ориентированным по горизонтали.В вашем случае, это может поэтому быть хорошей идеей, чтобы обернуть эти два элемента в другой элемент:
<div class="wrapper">
<div id="div1"></div>
<p>Move me</p>
</div>
Вы тогда скажите обертку, чтобы стать «гибкого контейнера», где режим по умолчанию будет течь коробки горизонтально, а чем по вертикали:
.wrapper {
display: flex;
}
Там исторически было несколько экспериментальных реализаций Flexbox с другим синтаксисом, так это то, чтобы быть в курсе тоже (смотрите пример ниже). Следующим шагом будет размер полей, если вы хотите, чтобы они имели размер, отличный от контента, что станет следующим шагом в изучении flexbox. :-) Первое, что вам нужно знать, это то, что в этой ситуации они все равно отреагируют на свойство width, и в противном случае растянутся, чтобы стать одинаково высокими.
Если вам нужна более широкая поддержка браузера, вы можете комбинировать flexbox с другими методами, которые не подходят для этой цели, но все еще работают - наплевать на плавающие или встроенные блоки. Хорошая вещь о flexbox заключается в том, что он игнорирует режим display и float свойств своих детей. Это означает, что мы можем сочетать старые и новые методы.
- Поплавки изначально предназначены для позиционирования изображений или других фигур справа или слева в блоках текста, например, но могут использоваться для создания целых макетов с небольшим количеством работы. У них есть некоторое сложное поведение, которое требуется некоторое время, чтобы понять. Например, поскольку поплавки по умолчанию торчат из своего контейнера по вертикали, вам обычно нужно добавить что-то, что делает оболочку вложением поплавков. Самый простой способ - это, вероятно, применить к обертке
overflow: hidden.
- Встраиваемые блоки в основном позволяют элементам уровня блока в потоке текста, но поскольку текст перемещается горизонтально (по крайней мере, на английском языке), вы можете также кооптировать их для создания полных горизонтальных макетов. Недостатком является то, что любые пробелы (включая строки) в источнике HTML создают пробелы между горизонтальными элементами.
Если вы идете маршрут поплавка, пример кода может выглядеть следующим образом:
.wrapper {
/* various flexbox syntaxes, old */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
/* modern flexbox syntax */
display: flex;
overflow: hidden; /* contain floats */
}
.wrapper p,
#div1 {
float: left; /* will be ignored by modern browsers */
}
Tusen галс Эмиль! Du skriver på ett lättförståeligt sätt, до тех пор, пока умение не станет доступно и не станет «учебным пособием». – HungryHippo
Det var så lite så, @HungryHippo. :-) Markera gärna svaret som accepterat om du tycker det besvarar din fråga. – Emil