1

レスポンシブ画像ギャラリーに取り組んでおり、見つけたコードを変更しようとしています。私が何を扱っているかを示すために、jsFiddle を作成しました。

jsフィドル

ギャラリーの各画像の下にいくつかのボタンを配置できるようにしたいと考えています。お気づきのように、画像の下に画像がある場合、上の画像のテキストは途切れています。私は.boxそのようにマージンボトムを追加することを考えました:

.box {
    float: left;
    position: relative;
    width: 14.28%;
    padding-bottom: 14.28%;
    margin-bottom: 30px;
}

margin-bottom 付きの jsFiddle

これにアプローチするより良い方法があるかどうか疑問に思っています。ウィンドウのサイズを小さくしすぎると、テキストが画像に重なってしまうようです。

4

4 に答える 4

0

おそらく、この問題の最も簡単な解決策は、ボックスの css を変更することです。

.box {
    float: left;
    position: relative;
    width: 14.28%;
    height: 14.28%;
    margin-bottom: 40px;
}

高さは、探しているものを取得するための padding-bottom よりもはるかにセマンティックな方法であり、テキストが適切に表示されることを確認するには (おそらく絶対に配置する必要はありませんが、小さな問題です)、margin-bottom を追加します。

margin-bottom をボックスのサイズのパーセント、たとえば 20% 程度にすることもできますが、小さな小さなボックスが問題 (ギャラリー全体が 50px 未満)

それが役立つことを願っています!

于 2013-08-15T12:52:20.057 に答える
0

http://jsfiddle.net/jFwYU/3/

body {
    margin: 0;
    padding: 0;
    background: #EEE;
    font: 10px/13px'Lucida Sans', sans-serif;
}
.box {
    float: left;
    position: relative;
    width: 14.28%;
    padding-bottom: 10px;
}

.boxInner img {
    width: 100%;
}

body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
    margin-bottom: 0;
}
@media only screen and (max-width : 480px) {
    /* Smartphone view: 1 tile */
    .box {
        width: 100%;
        padding-bottom: 10px;
    }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
    /* Tablet view: 2 tiles */
    .box {
        width: 50%;
        padding-bottom: 10px;
    }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
    /* Small desktop / ipad view: 3 tiles */
    .box {
        width: 33.3%;
        padding-bottom: 10px;
    }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
    /* Medium desktop: 4 tiles */
    .box {
        width: 25%;
        padding-bottom: 10px;
    }
}
@media only screen and (max-width : 1590px) and (min-width : 1291px) {
    /* Large desktop: 5 tiles */
    .box {
        width: 20%;
        padding-bottom: 10px;
    }
}
@media only screen and (max-width : 1920px) and (min-width : 1591px) {
    /* Extra large desktop: 6 tiles */
    .box {
        width: 16.6%;
        padding-bottom: 10px;
    }
}

1) 削除された位置: 絶対; boxInner および box_container の場合

2) float と position:absolute の使用は避けてください。一緒

3) 縦の寸法ではなく、横の寸法のみをパーセンテージで定義する必要があります (padding-bottom:33% は適切ではありません)。

于 2013-08-15T12:48:03.497 に答える