2

この方法で6つの異なる要素を配置するために、いくつかの異なる方法を試してきました:

ダイアグラム

互いに積み重ねられた 2 つの別々の順序付けられていないリストを使用しようとしましたが、ページを適切に拡大してスケーリングすることができませんでした。テーブルも使用してみましたが、要素を個々の tds の中心にすべての位置に配置できないようです。

順序付けられていないリストからのCSSは次のとおりです。

.button ul {
    height: auto;
    list-style: none;
}

.button li {
    display: inline-block;
    list-style: none;
    margin: 0 18% 0 0;
    padding: 0;
    vertical-align: top;
}

そしてこれらはこれに含まれています：

.newfooterright {
    float: left;
    width: 33.333333%;
    top: 0%;
    left: 0%;
    height: 250px;
    padding: 0 0 0 0;
    margin: 0;
    font-family: RobotoLight;
    text-decoration: none;
    text-transform: none;
    font-size: 1.5em;
    text-align: center;
    color: #ffffff;
    vertical-align: middle;
}

このメソッドを使用した jsfiddle は次の とおりです: 順序付けられていないリストの jsFiddle

順序付けられていないリストがおそらく進むべき道だと思います...すべての要素を各liの中央に配置する方法がわかりません。下部の要素は、li の右下隅に引っかかっているように見えました。一番下の要素も google+、twitter、facebook のウィジェットなので、それがそれらの位置に影響を与えているかどうかはわかりません。

基本的に、要素はこれを行うことができる必要があります:

  • 間隔の観点からウィンドウの幅に合わせてスケーリングします（ある程度、超小型の電話レイアウトなどは必要ありません。パディング右またはマージン右のようなものですか？）
  • 要素がスケーリングされるとき、下部の要素は中央の上部の要素と整列する必要があります
  • 写真のように配置！

これをきれいに配置する方法についての提案をいただければ幸いです。

どうもありがとう！

4

3 に答える 3

1

一般に、3 つの要素ごとに選択する場合は、 を使用する必要があります:nth-child()。括弧内には、 と の任意の組み合わせを入れることができますn。や などのキーワードもありoddますeven。したがって、この場合、3 つの異なる:nth-child()セレクターを持つことになります。このようになります

li:nth-child(6n+1), li:nth-child(6n+2), li:nth-child(6n+3) {
  color:red;
}

は6n6 要素ごとに選択し、+1はその数を加算します。したがって、プラグインすると、最初のセレクター、2 番目、 3 番目のセレクターに1戻ります。789

これは、これが使用されていることを示すフィドルです

nth-child詳しく解説した記事はこちら

于 2013-05-31T01:40:48.123 に答える
1

あなたの李はすべて崩壊する準備ができているようです.
Li に固定の高さと幅を指定し (必要に応じてボックスを作成します)、各画像にスタイルを追加して相対位置を設定し、上と左を使用してそれらを配置します (パーセンテージはあなたに合わせてスケーリングできることを忘れないでください)。あなたが実践して学びたいと思っていたので、これを達成する方法についてのヒントを落としましたが、CSS が必要な場合はお知らせください!

于 2013-05-31T02:09:30.053 に答える