0

私は現在、このレイアウトを設計およびコーディングしています。

問題の例

  1. ただし、[もっと見る、メールで送信、メッセージを送信]ボタン/アイコンをフッターの下部に配置して、それぞれを個別に含む代替divを作成せずにインラインにする方法がわかりません。

    • これは、視覚的な美的目的であり、表示されているデバイスに適応または応答するためです。また、ユーザー/サイトの所有者がサービスリストにさらに追加したり、紹介文の領域に追加したい場合は、「もっと見る」 、Eメールとメッセージの送信」ボタン/アイコンは、対応するために押し下げられます。

  2. 「CallUs、Visit Us and Email Us」エリアを、4つのdiv /セクションに分割せずにどのように達成しますか（1つのコンテナでそれらを保持し、1つはdivに電話し、1つはdivにアクセスし、1つはdivに電子メールを送信します）。おそらく疑似：コンテンツの前にアイコン/画像とフロートをどういうわけか左右に？これが正しいかどうか、私はあまり自信がありません。

  3. また、「サービス、お客様の声、クイックコンタクト」の領域を正しく並べていますか...左にフロート、左にフロート、右にフロートしますか？位置を左、右に設定し、「お客様の声」を中央に配置するので、2つの列の間ではなく、コンテナ内でのみ中央に配置されますか？

私のコードは次のようになります：http：//jsfiddle.net/mSmLH/

どんな助けでも大歓迎です。

私は次のことを適用
position: relativeしました：私の親（フッター）
position: inherit;とbottom:0;私の[もっと見る]ボタン
position: absolute;、そしてbottom:0;それを修正したように見える[メール]アイコンと[メッセージの送信]ボタンの両方に。おそらくもう少し調整が必要なことはわかっていますが、時間と労力をありがとう@Surreal Dreams

4

1 に答える 1

1

  1. さまざまな特許コンテナーの下部にあるアイテムを整列するには、まず、3 つのコンテナー div が同じ高さであることを確認します。これらの 3 つの要素の位置は、 andまたはルールposition: relativeをいくつか調整して手動で調整できます。toprightleft

  2. 私はしません。これら 3 つのセクションを div に配置することは問題なく機能しており、それが簡単な方法です。テーブルを使用することもできますが、それはレイアウトに対する間違ったアプローチです。あなたはこれを正しい方法で行っており、機能しています。それは良いことです™。

  3. 通常はすべて左にフロートしますが、左 2 つと右 1 つ (または右 2 つと左 1 つ) は完全に正当であり、さらに重要なことに、それは機能します。レイアウトに関しては、さまざまな方法があります。機能するものを見つけました - そしてそれはすべての中で最も重要な設計機能です.

于 2012-05-02T13:45:33.707 に答える