Плавающая коробка справа

0

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

Изображение 174551

Btw. синий ящик - это только цензованная коробка, которую я не хотел видеть на картинке.

Итак, мой вопрос для вас: как мне сделать плавающий блок? Я пробовал пару раз разными способами. в CSS, я сделал ящик и дал ему свойство float: right; Но когда я это делаю, это получается

Изображение 174551

Любая помощь будет оценена

  • 2
    А ваш текущий код где?
  • 0
    Какой код у вас с собой?
Показать ещё 2 комментария
Теги:
floating
box

3 ответа

1
Лучший ответ

DEMO

Вы можете сохранить выравнивание центра элемента, указав его 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;
}
Поделиться
  • 0
    Спасибо за ответ. У меня есть проблема, хотя. Я хочу, чтобы мой «основной» был в центре, и шириной 500 пикселей. Тогда я хочу "сторону" шириной 200px и рядом с ней. Но поэтому я установил обертку на 700px, но по какой-то причине «сторона» толкает «основной» больше влево, чтобы он больше не центрировался. Изображение здесь: i.imgur.com/SsDEUOL.png
  • 0
    Вы не можете держать один центр Div и другие элементы слева от них, как это, - я бы предложил использовать position: absolute; или отрицательное поле. Я обновил свой ответ, чтобы показать вам метод абсолютного позиционирования.
Показать ещё 1 комментарий
0

Изображение 174551

U может иметь display: inline-block основного контейнера display: inline-block

ширина каждого вспомогательного контейнера как width: 30%;

и ширину плавающей коробки, которая находится внутри третьего подконтейнера, как

width : 100%;

Если вам не нужен первый div,

поместите некоторый запас для второго контейнера

ex. margin-left: 300px;

и в случае, если вы не хотите, чтобы ширина плавающего поля ur составляла 100% от третьего контейнера, вы также можете настроить его

Поделиться
0

Я предполагаю, что у вас есть <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%;}

Предварительный просмотр:

Изображение 174551

Сценарий: http://jsfiddle.net/praveenscience/8WHyp/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню