0

Webサイトにフッターを追加しようとしていますが、テキストが動き続けます。

<div id="footer">
  <div id="footerchild">
    <a href=".html">1</a>
  </div>
  <div id="footerchildone">
    <a href=".html">2</a>
  </div>
  <div id="footerchildtwo">
    <a href=".html">3</a>
  </div>
  <div id="footerchildthree">
    <a href=".html">4</a>
  </div>
</div>

とcss

#footer {
  margin-left: 100px;
  background: #812;
  box-shadow: 1px 2px 40px 1px #444;
  border: 1px solid black;
  width: 1040px;
  height: 300px;
  position: absolute;
}

#footerchildone {
  float: right;
  margin-right: 500px;
  margin-top: -22px;
}

#footerchildtwo {
  float: right;
  margin-right: 350px;
  margin-top: -22px;
}

#footerchildthree {
  float:right;
  margin-top: -22px;
  margin-right: -250px;
}

各列を特定の距離で集中させたいのですが、たとえばchildthreeを移動すると、2番目の子がそれに続きます。私はそれらのそれぞれに別々のdivを与えたので、それはそのようであるべきではありません。何が問題ですか？

4

3 に答える 3

1

私はあなたがこれを達成しようとしていると思います：

http://jsfiddle.net/65GaS/5/

それはとても単純であるか、私はあなたを誤解しました。

于 2012-05-31T11:07:11.807 に答える
0

text-align：centerを追加して、親divのテキストを中央に配置し、すべての子divをposition：relativeとして作成する必要があります。display：inline-block; 自動的に親divの中心を揃え、子divのfloat：rightを必ず削除します。これがあなたのために働くことを願っています。

于 2012-05-31T11:49:51.813 に答える
0

http://jsfiddle.net/vvjAJ/

HTML

<div id="footer">
<div id="footerchild"><a href=".html">1</a></div>
<div id="footerchildone"><a href=".html">2</a></div>
<div id="footerchildtwo"><a href=".html">3</a></div>
<div id="footerchildthree"><a href=".html">4</a></div>
</div>

HTML

#footer
{margin-left: 100px;background: #812;box-shadow: 1px 2px 40px 1px #444;border: 1px solid black;width: 1040px;height: 300px;position: absolute;}
#footerchild{float:left;width:260px;margin-top: 50px;text-align:center;}
#footerchildone{float: left;width:260px;text-align:center;margin-top: 50px}
#footerchildtwo{float: left;width:260px;text-align:center;margin-top: 50px}
#footerchildthree{float:left; margin-top: 50px;text-align:center;width:260px;}
于 2012-05-31T11:20:37.007 に答える