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

cssfloat: leftのを削除するか（402行目）、またはでオーバーライドする必要があります。#main articlefloat: 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%;

}

Firebugで試してみましたが、ズームインまたはズームアウトしても問題なく表示されます。

于 2012-06-27T22:41:26.497 に答える