0

vBulletinのサイズを変更すると、3つの列が適切に再スケーリングされていることがわかります（ボード名、スレッド/投稿、最後の投稿）。

CSSでそのようなことをどのように達成できますか？私がそうしようとすると、それは常に互いに重なります。.board-iconの幅は、内部に画像があるため、同じままにする必要があります。

これは私のCSSです

.board-icon {
float: left;
width: 55px;
}

.board-title {
float: left;
background: red;
width: 50%;
}

.board-info {
float: left;
background: green;
width: 120px;
}

.board-lastpost {
float: left;
background: orange;
width: 240px;
}

同じ柔軟なレイアウトを使用した他の例を次に示します。

4

1 に答える 1

0

その背後にある CSS は、最新のブラウザーではそれほど複雑ではありません。ただし、これらの手法の一部は、いくつかの変更を加えないと、以前のバージョンの ie では機能しません。

この HTML の使用

<body>

    <div id="canvas">

        ...

    </div>

</body>

そしてこのCSS

body {
    margin:0;
    padding:0;
    position:relative;
}

#canvas, .main-width {
    min-width:960px;
    width: 80%;
    margin:0 auto;
}

.clear, #canvas:after {
    clear: both;
    height: 0;
    visibility: hidden;

#canvas:after {
    content: ".";
    display: block;
}

例のように px 幅ではなく、% 幅で作業を開始します。固定幅の値を使用する唯一の場合は、最小幅の宣言である必要があります。

たとえば、キャンバス div 内に 2 つの流動的な列を作成できます。

<div class="col1>

    ...

</div>

<div class="col2">

    ...

</div>

<br class="clear" />

CSS (960px の 34% で十分なので、最小幅は必要ありません)

.col1,.col2 {
    float:left;

}

.col1 {
    width:34%;
}

.col2 {
    width:66%;
}

.main-width上記の宣言に注目してください。#canvasこれにより、#canvas div 内のすべてのコンテナーにスタイルが適用され、まったく同じ幅と流動性が得られます。

<div class="main-width"> ... </div>

これで正しい軌道に乗るはずですが、px ではなく % で作業する必要があることを覚えておいてください。要素にボーダーを使用する必要がある場合はdisplay:block、% 幅で配置を維持するようにしてください。

于 2012-07-20T00:18:43.470 に答える