Question

在this page（正在进行的响应网站）中，包含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;
}

Answer 1

您需要从css中的float: left移除#main article（第402行），或使用float: none覆盖{。}}。

Answer 2

目前无法真正测试移动设备的响应速度，但似乎您只需要为文章元素添加宽度：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%;

}

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

如何使div内部与父（列）一样宽并且响应？

2 个答案: