3

別の div 内の div を (必要に応じて) 水平方向に中央揃えしてトリミングしようとしています。

これと同じ効果を背景画像で実現することは可能ですが、この場合、私のコンテンツは単一の画像ではありません。

フィドル: http://jsfiddle.net/7aMhY/1/

HTML:

<div class="poster_container">
  <div class="poster_row">
    <div class="poster" style="width: 210px;">1</div>
    <div class="poster" style="width: 210px;">2</div>
    <div class="poster" style="width: 210px;">3</div>
    <div class="poster" style="width: 210px;">4</div>
    <div class="poster" style="width: 210px;">5</div>
  </div>
</div>

CSS:

.poster_container {
  text-align: center;
  border: dotted;
  border-color: red;
  background-color: #0ff;
  margin: auto;
  overflow:hidden;
}
.poster_row {
  text-align: center;
  margin: auto;
  display: inline-block;
  white-space:nowrap;
  oveterflow:hidden;
  border: dotted;
  border-color: blue;
  max-width: 100%;
}
.poster {
  border: dotted;
  display: inline-block;
  border-color: green;
  background-color: green;
  height: 315px;
  font-size:280px;
  color: white;
}

poster_container div が poster_row div より広い限り、コンテンツは中央に配置されます。しかし、poster_row が広くなると、トリミングされますが、そのコンテンツは左にフラッシュされ、右側のみがトリミングされます。

私は内側の poster_row div センターを持ち、両側から均等にトリミングしようとしています。外側の div はビューポートの 100% になるため、その幅は任意です。理想的には、内側の div にも任意の幅を持たせたいので、CSS を変更せずにコンテンツを簡単に交換できます。

4

2 に答える 2

2

私はそれを得たと思います：

プレフィックスを追加して、最大幅の値を削除できます

.poster_row {
    margin: auto;
    text-align: center;
    display: inline-block;
    white-space:nowrap;
    overflow:hidden;
    border: dotted;
    border-color: blue;
    position: absolute;
    left: 50%;
    transform:translate(-50%,0);
}
于 2013-07-04T16:14:27.347 に答える
1

poster_row の幅が変更されない場合は、次を追加します。

.poster_row {
    text-align: center;
    margin: auto;
    display: inline-block;
    white-space:nowrap;
    overflow:hidden;
    border: dotted;
    border-color: blue;
    position:absolute;
    left: 50%;
    margin-left: -525px;
    width: 1050px;
}

それ以外の場合は、幅と左マージンを Js で計算する必要があります

于 2013-07-04T15:46:50.060 に答える