1

私が抱えているこの問題についてアドバイスが必要です。以下では、レスポンシブレイアウトjsfiddleを作成しようとしています。grid私が持っている問題は、テキストを各個人の真ん中に配置したいということgridです。margin-top を使用してバンプしようとしましたが、サイズ変更中に画像が重なり合うのではなく、画像が互いに重なり合っています。grid望ましい最終結果は、さまざまな画面解像度に応じてサイズを変更するときに、テキストを画像の中央に配置し、すべての側面に隙間がないようにすることです。

リンク: http://jsfiddle.net/kelvinchow/VaDS9/

<style type="text/css">
#wrapper {
    display: block;
    width: 100%;
    height: auto;
    background: green;
}
.box {
    display: inline-block;
    float: left;
    width: 50%;
    height: auto;
    vertical-align: baseline;
    background: red;
}
.box-img img {
    width: 100% !important;
    height: auto;
}
.box-title {
    display: block;
    background: grey;
    height: 25px;
    font-size: 20px;
    font-family: helvetica, san serif;
    color: blue;
    text-align: center;
    margin-top: -100px;
}
</style>

<div id="wrapper">
    <div class="box">
        <div class="box-img">
            <img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
        </div>
        <p class="box-title">howdy</p>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
        </div>
        <p class="box-title">howdy</p>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
        </div>
        <p class="box-title">howdy</p>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
        </div>
        <p class="box-title">howdy</p>
    </div>
</div>
4

1 に答える 1

1

あなたはこれを得るでしょう：

ここに画像の説明を入力

ここでフィドル: http://jsbin.com/osazav/1。

このマークアップを使用すると:

<body>
    <div id="tl" class="box">
        <p class="box-title">howdy</p>
    </div>
    <div id="tr" class="box">
        <p class="box-title">howdy</p>
    </div>
    <div id="bl" class="box">
        <p class="box-title">howdy</p>
    </div>
    <div id="br" class="box">
        <p class="box-title">howdy</p>
    </div>
</body>

そしてこのCSS：

div.box {
    background: url('http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png');
    position: absolute;
    height: 50%;
    width: 50%;
    background-size: cover;
    background-position: center;
}
div.box p.box-title {
    color: red;
    background-color: black;
    padding: 5px;
    position: absolute;
    margin: -10px -20px;
    top: 50%;
    left: 50%;
}
div.box#tl { top: 0%; left: 0%; }
div.box#tr { top: 0%; left: 50%; }
div.box#bl { top: 50%; left: 0%; }
div.box#br { top: 50%; left: 50%; }
于 2013-06-04T08:35:52.680 に答える