1

我确信我忘记的只是一些简单的事情，但是在这个特定的网站上工作了一整晚，我倾向于向你投降更高的智慧。

我正在尝试为 Wordpress 主题构建一个框（div）网格，虽然我对前两行没有问题，但第三行不会按应有的方式排列（底部宽 18px，三英寸一条线）。

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 回答