2011-11-16 4 views
0

Моя страница может быть найдена here.Простая позиция элемента css

Под изображением продукта есть черный видео-бокс. Я хочу, чтобы он плавал влево, поэтому мелкие изображения продукта встроены в видеоокна. Не в состоянии это сделать. Я прошел через CSS, чтобы увидеть, есть ли какое-то странное позиционирование, но я ничего не мог найти.

Если я переведу видеозапись ВЫШЕ на Facebook и сделаю ее плавающей, все будет работать так, как ожидалось - кнопка Facebook движется вверх.

+0

Это много, чтобы вырыть через ... соответствующие биты вложены двенадцать глубоко. Можете ли вы опубликовать демо-версию jsFiddle? Кроме того, я не вижу, чтобы 'float' применялся к видео-кнопке или любому из ее вложенных' div', поэтому я не уверен, как вы ожидаете, что она будет плавать влево. – Sparky

ответ

0

вы должны установить как запись контейнеров (дивы) на «дисплей: встроенный блок», и установите ширину для видео DIV «ширина: 70px», например. Посмотрите на скриншоте для получения дополнительной информации: image here

Поле и отступы помогут вам правильно центрировать по вертикали видео окна в строке, но ваша главная проблема решается с этими правилами CSS

Надеется, что это помогает! ! :-)

check it here

+0

, что для меня работало, нужно было поплыть слева от vido-colorbox и установить второй div-строчный блок, как вы предложили. Можете ли вы сказать, почему он не работал только с использованием float: осталось до первого div? Я делал это несколько раз на моем отроге, и это сработало. Это потому, что второй div содержит таблицы или что-то еще? спасибо – user1031742

+0

display: block делает ваш div ведением себя как
, я имею в виду, следующий контент будет отображаться чуть ниже него. Вот почему вы должны использовать display: inline-block. (inline, чтобы удалить подделку
и заблокировать, чтобы вести себя как div, а не как span). Установка ширины окна видео также помогает, потому что, если вы этого не сделаете, то он будет расширяться до 100%, поэтому для второй строки нет места. Береги себя! –

+0

хорошо, спасибо за объяснение – user1031742

1

Добавить float: left; в категорию view-content.

.view-content { 
    float: left; 
} 
Смежные вопросы