0

何が可能かは完全にはわかりませんが、現在、デスクトップモードで display: inline-block を使用して2つの画像を水平に表示する場合、順序付けられていないリストがあります。ただし、タブレット/ポートレート モードの場合は、表示がブロックに切り替わり、順序付けられていないリストが通常の方法で垂直に表示されます。

しかし、複雑なことに、メイン画像のそれぞれに重ねたい 2 つの小さな背景画像があります。これを実現するために絶対配置を使用しましたが、縦向きの形式 (幅 < 750px) に切り替えると、2 番目のメイン画像が最初の画像に重なって表示されます。おそらく、これは主にディスプレイからの移動によるものです:インラインブロックと、メインの背景画像と小さな背景画像のそれぞれに対する相対/絶対配置の継続的な使用。

各 li 要素に特定の高さ (500px) を与えることで、これをある程度改善しましたが、固定の高さを使用することで最終的にギャップが発生したときに、2 つの li がくっつくことを意図しています (各 li の幅が 100 であるため)。 % (したがって、タブレット/電話のサイズに関係なく、画像はコンテナーを埋めます))。

私が最初に考えたのは、高さ: 100% が適切であるということでしたが、これは単純に 2 番目の li が最初の li をオーバーレイする結果になります。

文字化けしたテキストが不明確な場合 (可能性が高い)、以下の Codepen リンクで私が意図していることを確認できます。2つのli要素が一緒に残ることを保証するためのガイダンスは、ありがたく受け取られます. とは言っても意図した効果はありえない！下に簡単な図もあります。

http://codepen.io/grabeh/pen/uInrk

HTML:

<ul class="photo-list">
  <li>
  <div class="image-holder">
     <img src="http://lorempixel.com/500/500"/>
     <span><a class="flickr-link"></a></span>
     <span class="upvote"></span>
  </div>

</li>
 <li>
    <div class="image-holder">
        <img src="http://lorempixel.com/500/501"/>
        <span><a class="flickr-link"></a></span>
        <span class="upvote"></span>
    </div>
   </li>
</ul>

CSS:

.photo-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.photo-list li {
    margin: 10px 10px 10px 0;
    display:inline-block;
    width: 48%;  
}

.photo-list li:last-of-type {
    margin: 10px 0  10px 0;
}

img {
   border: none;
   width: 100%;
}

.flickr-link {
   background-image: url('http://lorempixel.com/40/40/');
   background-repeat:no-repeat;
   width: 40px;
   height: 40px;
   float: left;
   z-index: 100;
   position: absolute;
}

.image-holder {
     position: relative;
}

.image-holder img {
    position: absolute;
}

.upvote {
    background-image: url('http://lorempixel.com/40/40/');
    background-repeat:no-repeat;
    width: 40px;
    height: 40px;
    float: left;
    z-index: 100;
    position: absolute;
    margin-left: 50px;
}

@media handheld, only screen and (max-width: 750px) {

.photo-list li {
    display: block;
    width: 100%;
    height: 500px;
  }
}

例の概略図

4

1 に答える 1

1

http://jsfiddle.net/xdXv2/

メイン画像は絶対位置に配置する必要はありません。小さな画像のみがその上に置かれる必要があるためです。メイン画像をドキュメント フローに戻すと、リスト アイテムの高さが再び得られます。つまり、高さを固定する必要がなくなります。

.flickr-link {
   background-image: url('http://lorempixel.com/40/40/');
   background-repeat:no-repeat;
   width: 40px;
   height: 40px;
   float: left;
   z-index: 100;
    top:0;  /*added this*/
   position: absolute;
}

.image-holder {
     position: relative;
}

.image-holder img {
    /*removed absolute position here*/
}

.upvote {
    background-image: url('http://lorempixel.com/40/40/');
    background-repeat:no-repeat;
    width: 40px;
    height: 40px;
    float: left;
    z-index: 100;
    position: absolute;
    margin-left: 50px;
    top:0;  /*added this*/
}

@media handheld, only screen and (max-width: 750px) {

.photo-list li {
    display: block;
    width: 100%;
    /*removed fixed height here*/
  }
}
于 2013-11-08T16:36:56.197 に答える