1

3 つの列があり、列の 1 つは幅が 50% で、他の 2 つの列は幅が 25% のサイドバーです。

HTML

<article></article>
<aside id="s1"></aside>
<aside id="s2"></aside>

CSS

article {
    width:50%; 
    float:left;
}

aside {
    width:25%;
    float:left;
}

#s1HTML 構造を維持しながら、異なるレイアウトを実現する方法でそれらをフロートすることは可能ですか?記事の左側と記事#s2の右側に配置したいと思います。

これはCSS3で可能ですか？上記のコードの jsFiddle は次のとおりです。

4

4 に答える 4

2

ページの構造を変更せずにそれを行う方法はありません.CSSは構造的な目的で使用することを意図していません. これは、セマンティック マークアップの原則に完全に反します。

この例のように、HTML を使用して構造を変更するように、ページを簡単に再構築できます。あるいは、@sandeep が良い答えを持っているようです。

于 2012-06-12T10:03:05.260 に答える
1

css を使用した 2 列のテーブル構造の例

#content {

  -webkit-column-count: 2;
  -webkit-column-rule: 1px solid #bbb;
  -webkit-column-gap: 2em;

  -moz-column-count: 2;
  -moz-column-rule: 1px solid #bbb;
  -moz-column-gap: 2em;

  column-count: 2;
  column-rule: 1px solid #bbb;
  column-gap: 2em;


  display: block;
}​

これがライブデモです。

http://playground.html5rocks.com/#columns

于 2012-08-08T12:01:33.437 に答える
0

S1 を記事の左側に配置したかったので、最初に配置します。

<aside id="s1"></aside>

それから記事

<article></article>

次に、右側-「s2」が必要だったので、最後に配置します

<aside id="s2"></aside>

Css へのいくつかの変更は有効ですが、css を変更しなくても機能します。

于 2012-06-12T10:08:19.357 に答える
0

これに使えますdisplay:table。次のように書きます。

article {
    background:#f0f0f0;
    width:50%;
    display:table-cell;
}

aside {
    width:25%;
    display:table-cell;
}

HTML

<aside id="s1"></aside>
<article></article>
<aside id="s2"></aside>

これをチェックしてくださいhttp://jsfiddle.net/UaFFP/2/

于 2012-06-12T10:04:52.123 に答える