1

そのすぐ下にテキストがある画像があるとしましょう。で包みdiv、中身を真ん中に置きます。

これらが 20 個あり、すべて同じサイズの画像 (つまり 65 ピクセル) ですが、テキストの量が異なります (テキストは折り返すことができます)。

これで達成したいことは次のとおりです。

各行の左右のマージンを 10px にして、できるだけ多くを同じ行に表示したいと思います。また、それらは常に中央に配置され、ブラウザ ウィンドウの幅を均等に埋めます。

理想的には、ブラウザーの幅が非常に小さい場合、各行に 1 つだけ表示されます。

このタイプのシナリオの CSS ソリューションを持っている人はいますか?

厳密にはモバイル向けです...IEについて心配する必要はありません

どうもありがとう！

アップデート

Heres は、私が使用しているいくつかの基本的なコードです.. 1 行あたり 4 をハードコードすると (それぞれ幅 25%)、それが機能することがわかります。

HTML:

<div class="m-parent-navigation-container">
    <div class="m-icon-navigation-container">
        <a class="m-icon-navigation-link"><img><br></a>
    </div>
</div>

CSS:

.m-parent-navigation-container
    {
    margin: 0 10px;
    color: rgb(26, 46, 120);
    font-size: 0.9em;
    overflow: hidden;
    }

.m-icon-navigation-container
    {
    float: left;
    text-align: center;
    width: 25%;
    }

.m-icon-navigation-link
    {
    display: block;
    font-family: OpenSansBold;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    }
4

5 に答える 5

4

これを見てください：http://jsfiddle.net/3QSVg/

重要な部分はdisplay: inline-block;、text-align: center;

これがまさにあなたが求めているものかどうかはわかりませんが、それが始まりです。

編集：

更新されたバージョンは次のとおりです: http://jsfiddle.net/j78Qw/1/

それはあなたが望むものに少し近いと思います。しかし、まだいくつかの問題があります。

于 2013-01-31T03:44:04.733 に答える
1

これにはフレックスボックスを使用できます。ブラウザのサポートはまだ不足していますが、主に webkit レンダリング エンジン、つまり iOS、Android、Windows 上の Chrome 向けに開発する場合は、それを使用できます。

見てください：http://codepen.io/anon/pen/fHklC

于 2013-01-31T03:50:47.570 に答える
0

純粋な CSS ソリューションはないと思います。

float: leftまず、画像ボックスが必要です。JS を使用すると、外側のコンテナーの幅を取得し、それを画像ボックスの幅で割ることができます。これにより、画像ボックスがいくつ収まるかがわかります。これで、コンテナの幅全体を満たすボックスの最大サイズを計算できるようになりました。これにより、画像を中央に揃えることができます。

<ul id="gallery">
    <li><img src="…" /></li>
    <li><img src="…" /></li>
    …
</ul>

var list = $('#gallery');
var items = list.find('li');

var imageWidth = items.width('auto').outerWidth(true);
var nrOfItemsPerRow = Math.min(Math.floor(list.innerWidth() / imageWidth), items.length);
items.css('width', Math.floor(100 / nrOfItemsPerRow) + '%');
于 2013-01-31T03:25:24.120 に答える
0

inline-blockあなたの友達はここにいます。

http://jsfiddle.net/Vmu9R/1/

inline-blockIE7 以前では十分にサポートされていないという点で、いくつかの注意点がありますが、回避策があります。

この記事は回避策をカバーしており、一般にインライン ブロックに関する優れた記事です。

あなたがIE7に関心があるというわけではありませんが、おそらく条件付きで以下を含める人のために

/* For IE 7 */
zoom: 1;
*display: inline;
于 2013-01-31T03:49:27.850 に答える
0

私の理解が正しければ、div(どんなコンテンツでも) s を並べて、流動的な幅にし、ページに十分なスペースがなくなったら必要に応じて折り返すことを検討していますか?

Flexboxはこれを実現できる可能性があります。この Fiddleを参照してください。

Flexbox に関するいくつかの優れたリソース:

使えますか？

于 2013-01-31T03:51:57.373 に答える