1

I have a full width div (#instagram) that has an a unordered list of images in it (the number of lis vary). I want the ul (and it's children) to be centered inside of the div and expand out in both directions without wrapping to next line. I have included a diagram below. How do I implement this in a responsive fashion?

<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>

enter image description here

Update: I realize that my diagram looks somewhat like a carousel but this is not what I'm looking for. I do not need any "paging" functionality. Also, I want the images to be cut off on the edges as I have shown.

Update #2 Here is a starting jsfiddle - http://jsfiddle.net/MULCU/

4

4 回答 4

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 回答
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 回答
0

如果您考虑使用 div 而不是 ul，它将使解决方案更好、更容易。考虑下面的代码。这定义了具有固定像素的#instagram div（但它会更改为 %），并以此为基础。这使得解决方案具有响应性。

我也把代码放在这个 jfiddle 上：http: //jsfiddle.net/cB7e4/

<div id = "instagram">
  <div class="photos">
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
    <div class="images"><img src = "http://stylebizz.com/wp-content/uploads/2013/02/cascading-style-sheets-css-logo.png?0d9bf2" /></div>
  </div>
</div>

<style>
#instagram
{
    width: 500px;
    height: 100px;
    background: #3AD7FF;
    position: absolute;
}

.photos
{
    width: 98%;
    height: 80%;
    margin-top: 2%;
    background: #B8FCCD;
    padding: 0% 1%;
    overflow-x:scroll;
    white-space:nowrap;
}

.images
{
    margin: 1.5% 1% 1% 0%;
    height: 80%;
    background: #F2FEE2;
    display: inline-block;
    position: relative;
}

.images img
{
    height: 100%;
}
</style>
于 2013-10-30T20:55:02.550 回答
-1

这样的东西怎么样？

.photos
    {
        list-style-type:none;
    }
    .photos li {
        float: left;
        margin:0px 5px 0px 5px;
    }

li 元素向左浮动，图片之间有小间距

于 2013-10-30T20:22:42.743 回答