具有百分比寬度的項目的響應列表

我有一個響應式佈局，其中側欄落在移動內容下方。具有百分比寬度的項目的響應列表

完整寬度中側邊欄中的項目列表寬度爲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

具有百分比寬度的項目的響應列表

回答

相關問題