0

次の単純なマークアップを使用してレスポンシブレイアウトを作成する必要があります。

<div class="wrapper">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</div>

div2とdiv3は中央に配置し、div1は左にフローティングの追加のdivにする必要があります（経歴データなどの場合）。

期待される：

     ______  __________
    |      ||          |
    | div1 ||   div2   |
    |______||          |
            |__________|
            |          |
centered->  |   div3   |  <-centered
            |          |
            |__________|

誤ったフローティングの私のステータス：

 ______      __________
|      |    |          |
| div1 |    |   div2   |
|______|    |          |
            |__________|
            |          |
centered->  |   div3   |  <-centered
            |          |
            |__________|

これが私の問題です：http：//jsfiddle.net/5fQFE/2/ CSSのみの解決策はありますか？

編集：これは複数回可能である必要があります：

     ______  __________
    |      ||          |
    | div1 ||   div2   |
    |______||          |
            |__________|
            |          |
            |   div3   |
            |          |
     ______ |__________|
    |      ||          |
    | div4 ||   div5   |
    |______||          |
            |__________|
            |          |
            |   div6   |
            |          |
            |__________|

ただし、次の単純なマークアップを使用します。

<div class="wrapper">
  <div class="div1">more markup here!?</div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4">more markup here!?</div>
  <div class="div5"></div>
  <div class="div6"></div>
</div>
4

2 に答える 2

2

これがCSSのみのソリューションを備えたjsFiddleです：http：//jsfiddle.net/persianturtle/5fQFE/3/

ラッパーに幅を追加して、ページの中央に配置するだけです。

.wrapper {
    padding: 20px;
    width:550px;
    margin:0 auto;
}

div1と他の2つのdivの間の幅は、ラッパーの幅によって制御されます。Div1はラッパーの左側に浮かんでいます。div1はフロートしているため、div 2と3の中央揃えには影響しません。レイアウトのdivの幅を大きくする場合は、ラッパーの幅も大きくしてください。

アップデート：

より多くのコンテンツとサイドバーが必要なため、さらにdivを追加しますが、同じクラスを指定します。このjsFiddleを見てください：

http://jsfiddle.net/persianturtle/5fQFE/6/

.div1, .div4 {
    background: #ddd;
    float: left;
    width: 100px;
}

.div2, .div5 {
    background: #ccc;
}

.div3, .div6 {
    background: #bbb;
}
于 2013-02-13T15:47:52.010 に答える
0

jsFiddle： http: //jsfiddle.net/5fQFE/4/

CSS

#wrapper {
    position: relative;
}

#div1 {
   position: absolute;
   top: 0;
   left: -210px;
   width: 200px;
}
于 2013-02-13T15:46:19.653 に答える