1

幅が同じで、間に2つの列がある、3つの列をすべて流動的にすることは可能ですか？私が見つけることができるものはすべて、1つの列が固定されているか、幅が異なることを示しています。それらすべてが同じである必要があります。このページで何をしても、最後のliはコンテナの端まで届きません。liの％を拡大すると、小さい解像度には収まりません。ありがとう！

ページの例はこちら

CSSはここにあります

4

4 に答える 4

3

動作させる方法についてはすでに回答を得ているようですが、これらの列に何らかのマージンや境界線がある場合は、すぐに別の問題が発生します。

それらの幅のパーセンテージ？境界線/マージンは含まれていません。したがって、これらのいずれかを追加すると、列が再びオーバーフローします。

解決？必ず設定してくださいbox-sizing: border-box;。これまで聞いたことがない場合は、Googleで設定してください。それは魔法です！

于 2012-12-06T18:50:55.283 に答える
1

あなたの質問は私を少し困惑させます。一方では、この例はあなたが求めているように聞こえるものを示しています：

http://jsfiddle.net/JuamW/

一方、サイトの実際の例は、カラムが流動的である必要がない固定幅の状況を示しています。上記の例で必要なものが得られない場合は、もう少しコンテキストを提供できますか？

于 2012-08-28T19:15:43.497 に答える
0

適切なパーセンテージを計算することがすべてだと思います。

新しく開始するには、3つの列すべての境界線と余白を削除します。次に、幅を33.3333％にして、すべてがコンテナ内に完全に収まるようにします。

CSSを見ると、中央の列に3.75％のマージン（左と右）があることがわかります。したがって、列の幅を100-（3.75 * 2）/ 3 = 30.833333％に再計算する必要があります。

次に、をに切り替えてborder、outlineレイアウトに不要な幅が追加されないようにします。

最後に、imgsを100％の幅にして、コンテナ内にうまく収まるようにします。

その後に行う必要がありますが、Firebugを使用してサイトでこれらすべての変更を実行しましたが、うまくいったようです。

于 2012-08-28T19:21:40.203 に答える
0

最後のliを取り出したい場合は、次を追加します。

#categories-wrapper ul li.students{
    float: right;
}

#categories-wrapper ul li.fine-art{
        float:left;
}

カテゴリラッパーulli：nth-​​child（2）を次のように置き換えます。

#categories-wrapper ul li.gd {
margin-left: 4.25%; /* 36px / 960px */
    float: left;

}

そしてこれを変更します：

#categories-wrapper ul li {
    width: 30.20833%; /* 290 / 960 */
    border: 1px solid #333;
    position: relative;
    }

それはあなたが探しているものですか？

于 2012-08-28T19:23:26.630 に答える