0

片側だけではなく、浮動要素の両側に要素をラップしようとしています。たとえば、http://jsfiddle.net/p384K/があります。#main要素が右側だけでなく左側にも動的に存在できるようにしたい。純粋なCSSでこれを行うことはできますか?

4

1 に答える 1

2

残念ながら、やりたいことを実現する簡単な方法はありません。これは、いくつかのハッキングと、中心要素のサイズを既に知っていると仮定することで実現できます。テクニックは、基本的に、サイド要素内に中央要素用のスペースを作ることです。

このような複雑な形状の手順の非常に詳細な説明は、この 2005 ALA の記事: Cross-Column Pull-Out Part Two: Custom Silhouettesにあります。

できることの基本的な例を 2 つ挙げました。

例 1:.space要素の使用

Demo

あなたがしていることは、次のような HTML 構造を持つことです。

<div class="container">
    <div class="center"></div>
    <div class="left">
        <div class="space></div>
    </div>
    <div class="right>
        <div class="space></div>
    </div>
</div>

グローバルな幅を設定し、おそらくコンテンツを中央に配置し、position: relative .

次に、CSS:

.container {

  position:  relative;
  width:     600px;

}

.left, .right {

  width:      50%;

}

.left { float: left; }

.right { float: right; }

.center {

  margin-left:      -75px; // Negative half the width
  width:            150px;
  height:           600px;
  position:         absolute;
  left:             50%;

}

.right .space { float: left;  }
.left  .space { float: right; }

基本的に、あなたがやっていることは、あなたと列.centerの間で均等に分割されたサイズの穴を作成し、その穴の中に要素を絶対に配置することです..left.right

例 2: 疑似要素の使用

Demo

同じアプローチですが、追加の HTML 要素を使用する代わりに::before、列の擬似要素を使用して内部に穴を開けます。CSS の唯一の変更点は次のとおりです。

.left::before, .right::before {

  content: "";
  height: 600px;
  width:  75px;

}

.left::before { float: right; }

.right::before { float: left; }

これにより、単純な 2 つのサイド コラム + 1 つのセンター コラムのレイアウトが実行可能になります。ただし、ALA の記事で説明されているように、レイアウトの複雑さによっては、追加の要素を追加する必要がある場合があります。

問題は、上で述べたように、これを機能させるには中心要素のサイズを知る必要があることです。JS を少し追加する場合は、サイズを動的に計算し、それに応じて穴のサイズを変更することで、この問題を簡単に解決できます。

これよりも効率的な CSS のみのアプローチが他にもいくつかあるかもしれませんが、私の知る限り、別の要素の両側で要素をラップするネイティブな方法はありません。

于 2013-03-29T17:22:15.780 に答える