2

私がまとめようとしているのは、基本的に、次のように、サムネイル画像の右下にタイムスタンプを付けて YouTube サムネイルを作り直すことです。

http://i.imgur.com/T1dXnhP.png

ただし、タイムスタンプを画像の上に配置して適切に配置する方法がわかりません。

これがJSFiddleです：http://jsfiddle.net/MgcDU/4162/

HTML:

<div class="container">
  <div class="small-video-section">
    <div class="thumbnail-container">
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
    </div>
    <div class="thumbnail-time">
      5:42
    </div>
  </div>
</div>

CSS:

.small-video-section {
  height: 134px;
}

.thumbnail-container {
  margin-top: 15px;
  margin-right: 20px;
}

.thumbnail-last {
  margin-top: 15px;
}

.thumbnail-time {
  display: inline;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #ffffff;
  background-color: #000000;
  opacity: 0.8;
  padding: 2px 4px 2px 4px;
}

助けてください！

4

4 に答える 4

5

このようなものをあなたに追加して、.thumbnail-time内部に移動してみてください.thumbnail-container：

  display:inline-block;
  position:relative;
  bottom:18px;
  right:52px;

jsfiddle

コンテナーに幅 (たとえば 220px) を割り当てるとposition:relative;、これを に追加できるようになります.thumbnail-time。

  display:inline-block;
  position:absolute;
  bottom:10px;
  right:10px;

時間は常にサムネイルの下と右側から 10px に配置されます。

jsfiddle

于 2013-05-11T23:14:24.027 に答える
3 
position: relative;
left: 180px;
bottom: 30px;

それを .thumbnail-time に追加するとうまくいきますが、理想的ではないかもしれません。

于 2013-05-11T23:09:52.787 に答える
2

使用する必要があります

position:absolute;

また、追加することをお勧めします

z-index:1000;

時間を含むdivで。

このように: http://jsfiddle.net/MgcDU/4181/

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index?redirectlocale=en-US&redirectslug=CSS%2Fz-index

于 2013-05-11T23:08:01.090 に答える
2

これをチェックしてください：http://jsfiddle.net/MgcDU/4172/

私は専門家ではありませんが、うまくいきます。より良い解決策のコメントを見つけたら、教えてください。私も学ぶことができます:)

.small-video-section {
    height: 134px;
}
.thumbnail-container {
    margin-top: 15px;
    margin-right: 20px;
    position: absolute;
    display:inline-block;
}
.thumbnail-last {
    margin-top: 15px;
}
.thumbnail-time {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    margin-top:20px;
    position:absolute;
    z-index:1;
    color: #ffffff;
    background-color: #000000;
    opacity: 0.8;
    padding: 2px 4px 2px 4px;
    display:inline;
}
于 2013-05-11T23:09:56.807 に答える