0

在此页面上（响应式站点正在进行中），包含 div（文章）的背景图像与最长的句子 (p) 一样宽。所以它们没有列宽（#main = 30em）。我可以用 CSS 做什么来使所有 div 与列一样宽，并且仍然保持它们的响应能力完好无损？

#agenda #main article {
    margin-bottom: 1em; 
    background: #fff url() repeat;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 0;
}

#agenda #main article h3 {
    color: #666;
    letter-spacing: 0.2em;
    text-transform: lowercase;
    line-height: 100%;
    margin-bottom: .4em;
    padding-top: .4em;
}

#agenda #main article h4 {
    color: #666;
    letter-spacing: 0.2em;
    text-transform: lowercase;
    line-height: 100%;
    margin-bottom: .4em;
    padding-top: .4em;
}

#agenda #main article p {
    color: #666;
}
4

2 回答 2

0

您需要float: left从#main article您的 css 中删除 （第 402 行）或用float: none.

于 2012-06-27T22:36:54.193 回答
0

目前无法真正测试移动设备上的响应能力，但您似乎只需要在文章元素中添加一个 width:100% ：

#agenda #main article {
background: url("") repeat scroll 0 0 #FFFFFF;
border: 0 none;
border-radius: 6px 6px 6px 6px;
margin-bottom: 1em;
width: 100%;

}

在萤火虫中尝试过，即使我放大或缩小它看起来也很好。

于 2012-06-27T22:41:26.497 回答