0

だから私は私が達成しようとしていることを示すためにこのフィドルを持っています：http：//jsfiddle.net/vbqmq/28/

2列のレイアウトがありますが、メインコンテンツの一部の要素をサイドバーに表示し、メインコンテンツブロックに残る要素の一部をメインコンテンツのテキストで折り返すようにします。

フィドルは、コンテンツがサイドバーのスピルオーバーをラップしないことを除いて、目的のレイアウトを示しています。

HTMLの現在の順序に固執していません。に入れる必要containerがある場合は問題ありませんが、それを行う場合でも、脇はcross-columnブロックの下にとどまる必要があります。

4

2 に答える 2

1

オリジナルソリューション

波及効果がセットであると仮定するwidthとheight（例として）、ここでは疑似要素が役立ちます。フィドルを参照してください。

#content:before {
    content: '';
    display: block;
    float: right;
    width: 50px;
    height: 100px;
}

より柔軟なソリューション

寸法に柔軟性を持たせるために私が知っている唯一の方法は、アイテムをコンテンツ領域に移動することです。このフィドルを参照してください。したがって、このhtml：

<div id="wrapper">
  <div id="main">
    <div id="container">
      <div id="content">    
        <div id="cross-columns"></div>    
        <div id="aside"></div>
        <p>Main content follows</p>
      </div>
    </div>
  </div>
</div>

元のCSSに若干のマージン調整を加えます。

#cross-columns{
    margin: -10px -160px 0 0;
}

#aside{
    margin-right: -160px;
}
于 2012-07-17T23:12:11.550 に答える
0

私はまだあなたが何を求めているのか100％確信していませんが、この小さなjqueryプラグインはかなりクールな形の周りにテキストをラップすることを知っています。

http://baconforme.com/
于 2012-07-17T23:29:43.243 に答える