0

私は CSS で 4 列のフッターを開発していますが、これに数時間取り組んだ後、達成できないことが 2 つあります。

1) 最初の列のパディングを後続の 3 つの列に複製する

2) 縦の境界線を 250px 全体に拡張します。

誰にもアイデアはありますか？これが私のコードです

http://jsfiddle.net/FdHAR/

4

4 に答える 4

2

ここで行う最善の方法は、footer-column各 に適用するクラス (おそらく ) を追加することですdivs。次に、これらの 4 つをclassdivsの aに入れます。構造は次のようになります。divfooter

<div class="footer">
  <div class="footer-column" id="footer_column1">...</div>
  <div class="footer-column" id="footer_column2">...</div>
  <div class="footer-column" id="footer_column3">...</div>
  <div class="footer-column" id="footer_column4">...</div>
</div>

明らかに、これが正しく見えるようにスタイルを変更する必要があります。

パディング

最初にパディングに対処しましょう。実際に行う必要があるのは、クラスを選択して、その上に何かpadding-leftをpadding-right配置することだけです。そのようにして、それぞれに同じパディングが自動的に適用されます。また、それらを並べて表示するには、floatそれらを並べる必要があります。このようなことができます：

.footer-column {
  float: left; // Push the div as far up-left as it can be put 
  width: 25%; // Make sure to subtract the padding
  padding: 10px; // We want padding on all sides to make things look nice
}

ここまでできたら、境界線を修正しましょう。

縦の境界線

フッター全体の高さがわからないと、これは少し難しくなります。どちらの方法でも、CSS セレクターを使用し:first-childて境界線を適用できます。これはそれを行う必要があります：

.footer-column {
  ...
  border-left: 1px solid black; // Whatever border you want goes here.
}

.footer-column:first-child {
  border-left: none;
}

フッターの高さがわかっている場合は、その高さを強制することができ、ボーダーは問題なく機能します。

.footer-column {
  ...
  height: 250px; // Force the box to be 250px tall
}

フッターの高さが分からない場合は、他のスタイリングと可能な JavaScript を使用する必要があります。しかし、質問で特定の値を述べたので、そうすると思います。

于 2012-10-05T03:18:27.140 に答える
1

display: table使用したいものdisplay: table-cell: http://jsfiddle.net/FdHAR/3/

于 2012-10-05T03:08:49.647 に答える
0

これを少し試してみると、これはあなたが望むものに近く、ブラウザ間でうまく機能するはずだと思います。フッターの固定幅または最小幅（<footer>html5）をお勧めします。

jsFiddle

建設的なフィードバック：

  • できるだけスタイルを組み合わせてみてください。同様の要素間でパディングなどを書き直したり再設定したりする必要はありません。
  • あなたはdivの中にdivを持っていましたが、それらを列のように扱っていました。より簡単なアプローチは、リストを使用して、各リスト項目を列と見なすことです。divを実行したい場合は、それらを相互に配置しないでください。
  • フォントサイズや行の高さを設定するためにemを使用するのが好きですが、それ以外の場合はpxを使用します。（個人的な好み、それはあなたが通常働いている画面なので意味があります）
  • 1つまたは2つの特定の厳密なサイズのみを設定してから、そのパーセンテージを使用してみてください。フッターのフォントサイズを1.2emに設定すると、h1のフォントサイズは130％になり、それよりも小さいサイズは80％になります。これは、幅などにも適しています（各列は親の25％です）。
  • jsFiddleのヒント、htmlドキュメント全体をそこに置く必要はありません。いじりたい部分だけを入れてください。cssやjqueryの場合も同様です。
于 2012-10-05T03:37:23.523 に答える
0

1) 追加

padding-left: 15px;

to #col2,3,4 は、テキストを垂直の白いバーの外に移動します。探している正確な間隔を取得するには、値をいじる必要がある場合があります。

2) 高さを追加: 250px; #container4 に変更して、適切なサイズにします。

警告: これはサファリで数分間調整した後のものです -- お使いのブラウザは異なる場合があります...

于 2012-10-05T03:25:14.340 に答える