В настоящее время я создаю веб-сайт с квадратной коробкой с текстом и т.д. Теперь, я также хочу, чтобы ящик плавал справа, с небольшим промежутком от моей основной коробки. Я оставлю изображение здесь, где красный ящик, который я нарисовал, - это плавающий ящик, который я хочу сделать.
Btw. синий ящик - это только цензованная коробка, которую я не хотел видеть на картинке.
Итак, мой вопрос для вас: как мне сделать плавающий блок? Я пробовал пару раз разными способами. в CSS, я сделал ящик и дал ему свойство float: right; Но когда я это делаю, это получается
Любая помощь будет оценена
Вы можете сохранить выравнивание центра элемента, указав его width
затем используя margin: 0 auto;
техника. это позволит убедиться, что ваш центр div находится в центре, тогда вы можете использовать position: absolute
чтобы создать другое поле в позиции смещения.
HTML:
<div class="main-wrapper">
<div class="main">This is in center position.</div>
<div class="side">This is in offset position.</div>
</div>
CSS:
body {
background: #333;
color: #fff;
}
.main-wrapper {
position: relative;
margin: 0 auto;
}
.main, .main-wrapper {
width: 500px;
}
.main {
border: 1px solid #f00;
min-height: 500px;
}
.side {
width: 200px;
border: 1px solid #f00;
min-height: 200px;
position: absolute;
top: 60px;
right: -300px;
}
.main, .side {
text-align: center;
padding: 10px;
}
position: absolute;
или отрицательное поле. Я обновил свой ответ, чтобы показать вам метод абсолютного позиционирования.
U может иметь display: inline-block
основного контейнера display: inline-block
ширина каждого вспомогательного контейнера как width: 30%;
и ширину плавающей коробки, которая находится внутри третьего подконтейнера, как
width : 100%;
Если вам не нужен первый div,
поместите некоторый запас для второго контейнера
ex. margin-left: 300px;
и в случае, если вы не хотите, чтобы ширина плавающего поля ur составляла 100% от третьего контейнера, вы также можете настроить его
Я предполагаю, что у вас есть <div>
с float: right;
в конце. Сохраните его в первом коде. Так что он будет плавать правильно. Я бы запрограммировал так:
<div class="right">Right</div>
<div class="main">
Main Contents
</div>
CSS:
.right {float: right; width: 20%;}
.main {margin: auto; width: 60%;}