Отзывчивый список элементов с шириной%

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

В полной ширине список элементов на боковой панели имеет ширину 100%. Таким образом, как один элемент в одной строке...

В мобильном я хочу 2 пункта в 1 строке... путем установки ширины каждого элемента на 50%. Не знаю, где я ошибаюсь...

ДЕМО: http://jsfiddle.net/nN6Zt/

#item {width:100%;background:#eeefff;}
#list_item{display:block;min-height:60px;border:1px solid #333}
@media only screen and (min-width:480px) and (max-width: 768px)
{
#item {width:50%;}
h1 {font-size:180%;line-height:120%;}
}
2 ответа

Вы дали 50% ширины предмета, присваиваете его элементу списка

Рабочая демонстрация: http://jsfiddle.net/surjithctly/nN6Zt/2/

#item {width:100%;
background:#eeefff;
float:left;
}
#list_item {
width: 49%;
float: left;
}

49%, чтобы избежать поломки.

Или вы можете использовать box-sizing:border-box; как сказал Том.

#list_item {
width: 50%;
float: left;
box-sizing:border-box;
}


Вы назначили CSS для div но не имеет a css, возложенные на него.... так как ваш конечный дочерний элемент является тег, его более семантический назначить стиль к нему для всех средств массовой информации с помощью запросов! a

поправьте это s на ваш css @media only screen and (min-width:480px) and (max-width: 768px) {} (или в зависимости от того, что было необходимо для приведения эффектов)

#item > a#list_item { display:inline-block; width:48%; /* to avoid any clash for breaking */ }

демонстрация

licensed under cc by-sa 3.0 with attribution.