1

私が忘れているのは単純なことだけだと確信していますが、この特定のサイトで一晩中働いていたので、私はあなたに優れた知恵を明け渡す傾向があります.

Wordpress テーマ用のボックス (div) のグリッドを作成しようとしていますが、最初の 2 行には問題はありませんが、3 行目は本来の位置に配置されません (下の幅の広い行の下に 18 ピクセル、下に 3 つの行があります)。行）。

http://jsfiddle.net/XSGmf/がすべてです。

#innercontent {
background-color: #FFF;
width: 920px;
display:inline-block;
margin-left:18px;
font-family:Arial, Helvetica, sans-serif;
}
#innercontent p {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
padding-left:10px;
padding-right:10px;
 }
#pageimage {
height: 20px;
width: 920px;
margin-left:18px;
background-color:#000;
display:inline-block;
 }
#cta1 {
height: 292px;
width: 606px;
margin-left:18px;
background-color: #00A850;
float: left;
vertical-align:top;
display:inline-block;
position:relative; }
 #cta2 {
background-color: #00A850;
float: right;
height: 292px;
width: 292px;
margin-right:18px;
vertical-align:top;
position:relative;
display:inline-block; }

#cta3 {
height: 292px;
width: 606px;
margin-left:18px;
margin-top: 18px;
margin-right: 22px;
margin-bottom:18px;
background-color: #00A850;
float: left;
display:inline-block;
position:relative; }
#cta4 {
background-color: #00A850;
float: right;
margin-top:18px;
margin-right:18px;
height: 292px;
width: 292px;
position:relative;
display:inline-block; }
#cta5 {
height: 292px;
width: 292px;
margin-left:18px;
margin-top: 18px;
margin-bottom:18px;
background-color: #00A850;
float: left;
display:inline-block; }
#cta6 {
height: 292px;
width: 292px;
margin-left:22px;
background-color: #00A850;
vertical-align:top;
display:inline-block;
position:relative; }
#cta7 {
height: 292px;
width: 292px;
float:right;
margin-right:18px;
background-color: #00A850;
vertical-align:top;
display:inline-block;
position:relative; }
#ctamidtop {
height: 146px;
width: 292px;
position:relative;
text-align:center;
display:inline-block; }
.ctamidtop a {
font-family:"Arial Black", Gadget, Arial, sans-serif;
color:#FFF;
text-align:center;
font-size:26px;
padding-top:10px;
text-decoration:none; }
#ctawidetop {
height: 146px;
width: 606px;
position:relative;
text-align:center;
display:inline-block; }
.ctawidetop a {
font-family:"Arial Black", Gadget, Arial, sans-serif;
color:#FFF;
text-align:center;
font-size:26px;
padding-top:10px;
text-decoration:none; }

#ctasmalltop {
height: 146px;
width: 292px;
font-family:"Arial Black", Gadget, Arial, sans-serif;
color:#FFF;
text-align:center;
position:relative;
display:inline-block; }
.ctasmalltop a {
font-family:"Arial Black", Gadget, Arial, sans-serif;
color:#FFF;
text-align:center;
font-size:22px;
text-decoration:none; }
#frontimage img {
position:relative;
display:inline-block;
float:left;
width:606px; }
#titlebar {
background-color: #17A752;
height: 50px;
width: 920px;
vertical-align:top;
display:inline-block;
margin-left:18px;
font-family:"Arial Black", Gadget, Arial, sans-serif;
font-size:20px;
color:#FFF;
text-align:center; }
#titlebar span{
font-family:"Arial Black", Gadget, Arial, sans-serif;
font-size: 36px;
color:#FFF;
text-align:center;
margin-top:0px;
display:block; }
#mainframe {
background-color: #000;
width: 956px;
margin-left:2px; 
    display:inline-block;
position:relative; }

正しい方向への助けやナッジをいただければ幸いです。

4

1 に答える 1

1

css をクリーンアップする必要があります。純粋な css を使用したグリッドが必要な場合は、すべての div 要素の高さをすべて固定する必要があります。

.mainframe > div{
    display:inline-block;
    max-height:292px;
    max-width:292px;
    border:1px;
    background:Red;
    margin:10px
}

DIV をグループとしてターゲットにしていることに注意してください。現在のマークアップは、HTML および CSS プロパティを使用していません。

クラスはグループ向けです。ID は個々の要素用です。

簡単なデモはこちらでご覧いただけます。flex-box CSS を調べることをお勧めします。css を作り直す必要がありますが、これは将来に対応しており、多くの柔軟性を提供します。

于 2013-10-09T08:03:17.380 に答える