Question

我有一个自适应布局，其中侧边栏位于移动设备内容的下方。

在全宽度中，侧边栏中的项目列表宽度为100％。所以它就像一行中的一个项目......

在移动设备中，我想通过将每个项目的宽度设置为50％来实现1行中的2个项目。不知道我哪里错了......

#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%;}
}

Answer 1

您为项目提供了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;
}

Answer 2

您已为div分配了css，但a未分配任何css ....因为您的结束子元素是a标记，为所有媒体查询的使用赋予它更多的语义来分配样式！

将此修改为@media only screen and (min-width:480px) and (max-width: 768px) {}的css（或引入效果所需的任何一个）

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

demo

具有％宽度的响应式项目列表

2 个答案: