2014-11-08 6 views
-1

Я не могу получить div s в списке, который будет бок о бок, они идут к следующей строке.Как я могу поместить эти divs бок о бок

Может кто-нибудь, пожалуйста, покажите мне, как это делается.

Я имею в виду раздел в нижней правой части веб-страницы, на котором есть изображения фильма, расположенного в базовой ссылке.

sugestmovie.net

+1

Добавить ** поплавок: левый ** до вашего пункта «LI». –

ответ

1

Вы можете сделать это двумя способами.

Метод 1: В коде, вместо того, чтобы установить display от inline в inline-block. Это должно решить вашу проблему. И редактирования должна напоминать следующее:

.bookmarkedMovies li { 
    display: inline-block; 
} 

Метод 2: Или просто, float требуемый div тег left.

.bookmarkContainer { 
    float: left; 
    /*required css*/ 
} 

Любой из вышеперечисленных будет работать нормально ...

+0

Это работало лучше всего, потому что оно сохраняло высоту .graybox одинаково. Спасибо – code511788465541441

+0

@ code578841441 :) – cuSK

2

Добавить в классе «bookmarkContainer» атрибут поплавок со значением «левого»

.bookmarkContainer { 
    /* other css rules ... */ 
    float: left; 
} 

Edit: Я попытался с Firebug, и это работает отлично, на картинке выше вы можете увидеть он работает, также я добавил margin: 10px; и до закрытия закрывающего элемента i <div style="clear:both"></div>, которые позволяют родительскому контейнеру обертывать элементы списка. I enter image description here

1

Как и было предложено, вам необходимо float: left;. Наряду с маржой вы должны иметь именно то, что хотите. Очевидно, вам нужно будет настроить маржу на основе ваших потребностей.

JSFiddle

.bookmarkContainer { 
    width: 50px; 
    float: left; 
    margin: 0 20px; 
} 

Кроме того, при работе с поплавками всегда очистить их потом или испортите содержимое следующего за ним.

<div style="clear:both;"> 
Смежные вопросы