html - 在 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

只需在 CSS 中添加：

.header-cell {
    margin: 5px;
}

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

Answer 2

添加一些边距<div>

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

Answer 3

似乎您在使用以下结构之间忘记了一些 s

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