1

私はまだ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;
}

余白、パディング、フローティング画像を残してみました。何も機能していないようです。ヘルプ？

4

3 に答える 3

1

にマージンを追加します<div>

.header-second-column, .header-third-column, .header-fourth-column
{
    margin-left: 10px;
}
于 2012-05-03T06:09:28.147 に答える
1

これをCSSに追加するだけです。

.header-cell {
    margin: 5px;
}

要件に応じて、マージンの値をピクセル単位で変更します。

于 2012-05-03T06:20:20.113 に答える
0

構造の下での使用の間にいくつかのsを忘れたようです

<div>
  <div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
  </div>
  <div></div>
  <div>
    <div></div>
    <div></div>
  </div>
</div>
于 2012-05-03T06:20:55.270 に答える