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;
} 

我尝试在左侧添加边距、填充和 float 图像。似乎没有任何效果。 帮忙？

Answer 1

为 <div> 添加一些边距

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