具有百分比宽度的项目的响应列表

我有一个响应式布局，其中侧栏落在移动内容下方。具有百分比宽度的项目的响应列表

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

在移动我想要1行中的2项...通过设置每个项目的宽度为50％。不知道我要去的地方错了...

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

来源

2013-12-23 Debajyoti Das

另外一个建议是使用，而不是ID的类。多个元素不应该使用相同的ID。 –

@TomPietrosanti同意队长，只是为小提琴快速html :) –

你给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; 
}

来源

2013-12-23 13:11:09

你可以使用'box-sizing：border-box'（https://developer.mozilla.org/en-US/docs/Web/CSS/box大小）使用'50％'而不需要神秘的调整以避免断线。另外，值得指出的是，你必须用'float'（如Surjith所做的）或'display：inline-block'来抵消'display：block'。 –

@TomPietrosanti - 哪个更安全？ IE考虑。 –

谢谢@TomPietrosanti我已经上了小提琴http://jsfiddle.net/surjithctly/nN6Zt/13/ –

您分配了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 */ 
    }

demo

来源

2013-12-23 13:13:40 NoobEditor

具有百分比宽度的项目的响应列表

回答

相关问题