html - フッターに並んだテキストのブロック

Question

私はこのような何かを達成しようとしています..

http://line25.com/フッターに「Line25について」と「最も人気のある投稿」が並んでいるのを見てください。

私はフッターでこれを行い、小さな画面解像度ではあちこちに移動します。

http://akaleez.co.uk/Templates/1/

Answer 1

ボックスをラッパー div に配置し、次のように中央に配置します。

.wrapper {
margin:0 auto;
display:table;
}

表示テーブルにより、3 つのボックスとまったく同じ幅になります。次に、最初のボックスの余白を削除します。

現在、180 ピクセルの余白がありますが、画面が予想よりも小さいか広い場合、明らかに適切に中央に配置されません。

Answer 2

「いたるところに移動する」理由はwidth: 100%、フッターに指定するためです。ビューポートの幅が 3 つのテキスト ブロックの幅よりも小さい場合、そのうちの 1 つが他の 2 つのテキスト ブロックの下に表示されます。

次のように、テキスト ブロックの周りに別のラッパーを追加します。

<div id="foot">
  <div id="footer-wrapper">
    <div class="box1">...</div>
    <div class="box2">...</div>
    <div class="box3">...</div>
  </div>
</div>

次に、CSS 定義に以下を追加します。

#footer-wrapper {
  min-width: 990px;
  margin-left: 180px;
}

次に から を削除margin-leftし.box1ます。

これにより、ページ全体が強制的に 1170px 幅になり、すべてを表示するのに十分なスペースがない場合は、ウィンドウの下部にスクロール バーが表示されることに注意してください。それが望ましくない場合は、これを CSS に追加してみてください。

#foot {
  overflow: hidden;
}