1

ブラウザ間で最も互換性のあるソリューション (IE6 を含む) を見つけるのは難しいです。

3 列、側面の 2 列は応答性が高く、画面に合わせて調整できます。

中央の列は空にする必要がありますが、幅は固定です:

ここに画像の説明を入力

それらをすべてレスポンシブにするのは簡単です: http://jsfiddle.net/Baumr/sZehH/2/ (この場合、中央のものは列ではなく単なる余白です — これは素晴らしいことです)。

<section> 
    <div>
        <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p>
    </div>
    <!-- Best if Column 2 is a margin or something -->
    <div>
        <p>Column 3, lorem blops dolor bla laa cats and dogs</p>                        
    </div>
<section>

の使用を検討しましposition:たが、面倒になる可能性があります...

何か案は？前もって感謝します。

4

4 に答える 4

2

間隔のために内部要素を使用するのはどうですか? 各列内の別の DIV タグである可能性があります。

http://jsfiddle.net/sZehH/3/

HTML:

<section> 
    <div class="left">
        <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p>
    </div>

    <div class="right">
        <p>Column 3, lorem blops dolor bla laa cats and dogs</p>                        
    </div>
<section>

CSS:

section div {
    float: left;
    width: 50%;

}

section div p {
    background: pink;
    padding: 2.5%;    
}

.left p {
    margin-right: 20px;
}

.right p {
    margin-left: 20px;
}

すでに存在する段落を使用しましたが、おそらく複数の要素があるため、それを考慮してラッピング要素を追加する必要があります。</p>

于 2012-10-28T03:46:48.867 に答える
1

厳密なブラウザー サポート要件を考えると、非セマンティックを使用する必要がある場合がありますtables。このtableソリューションは、すでにご存知かもしれませんが、この JSFiddleまたは以下で表示できます。ああ、私はそれをテストしていませんが、私が知る限り、これはすべてIE6と互換性があるはずです:

HTML:

<table> 
  <tr>
    <td class="column">
        <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p>
    </td>
    <td class="center-column"><div id='ie6-fix'></div></td>
    <td class="column">
        <p>Column 3, lorem blops dolor bla laa cats and dogs</p>                        
    </td>
  </tr>
<table>

CSS:

.column {
    background: pink;
}
.center-column {
    background-color: #eee;
    width: 100px;
    min-width: 100px;
}
#ie6-fix {
    width: 100px;
}
于 2012-10-28T07:39:00.780 に答える
1

最善の解決策はボックスサイジングだと思います。古いブラウザーでは技術的にサポートされていませんが、ポリフィルがあります。

次のフィドルをチェックしてください。

CSS (ベンダープレフィックスは除く):

html, body {
    background: #000;
    height: 100%;
    width: 100%;
    color: #000;
}    

#columnOne, #columnTwo {
    width:50%;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
}

#columnOne {
    float:left;
    border-right: 20px solid blue;
}

#columnTwo {
    float: right;
    border-left: 20px solid blue;
}​

HTML:

<html>
    <body>        

        <div id="columnOne">HI!</div>
        <div id="columnTwo">HI!</div>

    </body>
</html>  ​

詳細はこちら、ポリフィルの詳細はこちら。

楽しむ！

于 2012-10-28T03:57:09.980 に答える
0

YAML のような堅牢な CSS フレームワークを使用することをお勧めします。

2 つまたは 3 つの列を使用して、列状のレスポンシブ レイアウトを作成できます。したがって、クロスプラットフォームの問題を解決しようとする代わりに、アートと開発に集中できます。

これをチェックしてください： http://www.yaml.de/demos/flexible-columns.html

于 2012-10-28T03:42:36.080 に答える