在CSS div表中格式化图像

Question

我还在学习CSS和页面格式并且卡住了。真的很感激一些帮助。

在这里做这个简短是我想要实现的目标：

而这正是我所得到的：

我似乎尝试了一切。这是代码：

<div class="header-parent">

<div class="header-first-column">
  <div class="header-cell" id="header-img1">
  <img src="../../Content/images/header/header_img1.jpg" />
  </div>
  <div class="header-cell" id="header-img2">
  <img src="../../Content/images/header/header_img2.jpg" />
  </div>
</div>

<div class="header-second-column">

 <div class="header-cell" id="header-img3">
 <img src="../../Content/images/header/header_img3.jpg" />
 </div>
 <div class="header-cell" id="header-img4">
 <img src="../../Content/images/header/header_img4.jpg" />
 </div>

</div>

<div class="header-third-column">
    <div class="header-cell" id="header-img5">
    <img src="../../Content/images/header/header_img5.jpg" />
    </div>
</div>

<div class="header-fourth-column">
    <div class="header-cell" id="header-img6">
    <img src="../../Content/images/header/header_img6.jpg" />
    </div>
    <div class="header-cell" id="header-img7">
    <img src="../../Content/images/header/header_img7.jpg" />
    </div>
</div>

和CSS：

.header-parent
{
    width:900px;
    top:10px;
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    }

.header-first-column
{
    width:219px;
    background-color:White;
    float:left;
    display:block;
}


.header-second-column
{
    width:285px;
    background-color:White;
    float:left;
    display:block;
}

.header-third-column
{
    width:158px;
    background-color:White;
    float:left;
    display:block;
}


.header-fourth-column
{
    width:220px;
    background-color:White;
    float:left;
    display:block;
}

图像本身我尝试直接使用其ID进行格式化，例如：

#header-img1
{
    padding:0 0 0 0;
    text-align:center;
} 

我尝试添加边距，填充，浮动图像。似乎没什么用。 帮助

Answer 1

为<div>

添加一些保证金

.header-second-column, .header-third-column, .header-fourth-column
{
    margin-left: 10px;
}

Answer 2

只需在CSS中添加：

.header-cell {
    margin: 5px;
}

根据您的要求更改边距值（以像素为单位）。

Answer 3

似乎你忘了介于两者之间 使用以下结构

<div>
  <div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
  </div>
  <div></div>
  <div>
    <div></div>
    <div></div>
  </div>
</div>