0

2 つのサイドバーと中央に配置された 1 つの画像の高さを揃えたい。さらに、サイドバー (テキストを含む) は、外側のコンテナーからの高さに合わせて垂直方向に配置する必要があります。

問題を説明するフィドルを作成しました： http://jsfiddle.net/SW3DT/

この例を全画面表示すると、すべてが正しく表示されますが、フィドル HTML プレビュー (または小さいビュー) を見ると、機能しなくなります。

そのため、次の問題があります。

  1. コンテナを横に並べて中央に配置 (位置:絶対、左、右)
  2. 子オブジェクトを側面 (この場合は p) から垂直に整列します (絶対を破ります)。
  3. これをすべて動的に実行して、さまざまな画面サイズで使用できるようにします

3 つのポイントをすべて一緒に見ることができると、CSS でこれをコーディングするのが難しくなります。

誰にも解決策がありますか？

さらに、そのようなタスクのために再利用可能なcssクラスを定義するにはどうすればよいですか?

よろしく、 bsus

4

1 に答える 1

1

私があなたの質問を正しく理解していれば、左右の列が 200px の幅を占める、3 つの列を持つ中央揃えのラッパーが必要です。このような場合は：

このフィドルの例を参照してください

HTML:

<div class="content">
    <aside class="column right">
        <p>
             text...
        </p>
    </aside>
    <aside class="column left">
        <p>
             text...
        </p>
    </aside>
    <div class="column center">
        <img class="home_image" src="path_to_image.png" />
    </div>
</div>

CSS:

/* the main wrapper */
.content {
  position: absolute; top: 50%; left: 50%;
  width: 800px; height: 500px;
  margin-left: -401px; margin-top: -251px;
  border: 1px solid #D9D9D9;
}

/* columns */
.column {
    position: absolute; top: 0; bottom: 0;
    width: 180px;
    padding: 10px;
}

.column.left{
    left: 0; background-color: #F2F2F2;
}
.column.right {
    right: 0; background-color: #F2F2F2;
}
.column.center {
    left: 200px; right: 200px;
    text-align: center;
    width: auto;
}

.column.center img {
    border: 1px solid #111; border-radius: 22px;
    width: 128px; height: 128px;
    margin: 0 auto;
}

さらに、そのようなタスクのために再利用可能なcssクラスを定義するにはどうすればよいですか?

、および要素に.column適用されるクラスが表示され、3 つすべてで再利用されます。.left.right.center

于 2012-05-14T18:05:38.507 に答える