3

3x3 グリッドに 9 つの正方形の画像を表示しようとしています。3x3 の正方形全体のバウンディング ボックスを引き伸ばして、各タイルを引き伸ばしたいと考えています。

私の解決策にはテーブルが含まれます-最近は敬遠されていると思いますか? 最新および現世代のブラウザーでこれを行う正しい方法は何でしょうか?

親切にしてください - 私が最後にフロントエンドの開発を行ったとき、テーブルが流行していて、Y2K ではありませんでした。

4

3 に答える 3

6

これは 3x3 流体正方形の例です。高さまたは幅が変更されると、それが変わります。

<div id="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

CSS:

html, body{
    width:100%; 
    width:100%; 
    margin:0; 
    padding:0;
}

#container {
    width:100%; 
    height:100%;
}
.square{ 
    border:1px solid #000;         
    padding-bottom: 30%; 
    height: 0;
    width:30%; 
    margin:1%; 
    float:left; 
    display:block;
}

そして、働くフィドル

danrhulの提案で動作するDEMOを使用<ul>

于 2013-10-10T12:37:40.380 に答える
2

このようなもの？ボックス内に画像を配置し、コンテナ全体のサイズを変更します。(自動では収まりません。コンテナのサイズを自分で設定する必要があります) 使用できると確信しているので、これをここに入れたかっただけです。

HTML:

<div id="box">
    <div class="row">
        <div class="boxes">Box 1</div>
        <div class="boxes">Box 2</div>
        <div class="boxes">Box 3</div>
    </div>
    <div class="row">
        <div class="boxes">Box 4</div>
        <div class="boxes">Box 5</div>
        <div class="boxes">Box 6</div>
    </div>
    <div class="row">
        <div class="boxes">Box 7</div>
        <div class="boxes">Box 8</div>
        <div class="boxes">Box 9</div>
    </div>
</div>

CSS:

#box {
    width: 400px;
    height: 400px;
    border: #000000 solid 1px;
}
.boxes {
    width: 100%;
    height: 100%; 
    border: #000000 solid 1px;
    float: left;
    text-align: center;
}
.row {
    width: 33.3%;
    height: 33%;    
    float: left;
}

デモはこちら

于 2013-10-10T12:23:46.640 に答える
0

%寸法と画像に使用float:

img {
    display: block;
    float: left; 
    width: 33.3%;
    height: 33.3%; 
}

チェック: http://jsfiddle.net/xSEnd/1/

于 2013-10-10T12:30:45.940 に答える