1

全幅の div ( #instagram) があり、その中に画像の順序付けられていないリストがあります (lis の数は異なります)。ul(およびその子) を div の中央に配置し、次の行に折り返さずに両方向に展開する必要があります。以下に図を含めました。これをレスポンシブな方法で実装するにはどうすればよいですか?

<div id = "instagram">
  <ul class="photos">
      <li><img src = "http://placehold.it/200" /></li>
    <li><img src = "http://placehold.it/200" /></li>
    <li><img src = "http://placehold.it/200" /></li>
  </ul>
</div>

ここに画像の説明を入力

更新:私の図はカルーセルのように見えますが、これは私が探しているものではありません。「ページング」機能は必要ありません。また、私が示したように、画像の端を切り取ってほしい。

更新＃2これが最初のjsfiddleです- http://jsfiddle.net/MULCU/

4

4 に答える 4

1

white-space:nowrap プロパティを試したところ、これが得られました。全体の最大幅を制限したので、「応答性」を確認するには画面サイズをいじる必要があります。

#instagram {
    overflow:hidden;
    width:100%;
    background-color:red;
    padding:10px 0;
    max-width:400px;
}

.photos {
    background-color:orange;
    height:50px;
    padding:10px 0;
    position:relative;
    white-space:nowrap;
}

.photos li {
    width:50px;
    height:50px;
    display:inline-block;
    list-style:none;
    background-color:yellow;
    margin-right:10px;
}

c

<div id = "instagram">
    <ul class = "photos">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

JSFiddle

于 2013-10-30T20:24:58.270 に答える
1

追加のラッパーを追加すると、画像を中央に配置し、余分な部分を切り取ることができます。

#instagram {
    position:relative;
    overflow:hidden;
    background-color:blue;
    padding:20px 10px;
    text-align:center;
}
#instagram .bounds {
    width:2000%;
    padding-left:50%;
    text-align:center;
}
#instagram ul {
    list-style-type:none;
    padding:0;
    margin:0;
    margin-left:-100%;
    background-color:green;
    white-space:nowrap;
    text-align:center;
}
#instagram ul li {
    display:inline-block; 
    margin:10px;
    padding:0;
}

私の作業フィドルを参照してください

于 2013-10-30T20:52:20.850 に答える