CSS使响应

时间：2018-08-12 14:54:27

标签： html css responsive-design

我正在尝试使其具有响应性，但是问题是当我减小窗口大小时，它会超出屏幕

<h5>User Stories</h5><div class="stories-list d-flex "><div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/578e883ef475d1232ce59936563bbe4e/5B726BC1/t51.12442-15/sh0.08/e35/p640x640/38035134_221249845233474_6747640763024146432_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/ff89a52784b070742b3a20a8e66fee65/5B726D26/t51.12442-15/e35/38035134_221249845233474_6747640763024146432_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/7f73c9a2e9e023cb992050eed84c800b/5B729C5D/t51.12442-15/sh0.08/e35/p640x640/37970915_275334373066916_3183150178899066880_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/b7876d21a14741ec0d4d33e459edd77b/5B7368FA/t51.12442-15/e35/37970915_275334373066916_3183150178899066880_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/578e883ef475d1232ce59936563bbe4e/5B726BC1/t51.12442-15/sh0.08/e35/p640x640/38035134_221249845233474_6747640763024146432_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/ff89a52784b070742b3a20a8e66fee65/5B726D26/t51.12442-15/e35/38035134_221249845233474_6747640763024146432_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/7f73c9a2e9e023cb992050eed84c800b/5B729C5D/t51.12442-15/sh0.08/e35/p640x640/37970915_275334373066916_3183150178899066880_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/b7876d21a14741ec0d4d33e459edd77b/5B7368FA/t51.12442-15/e35/37970915_275334373066916_3183150178899066880_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/578e883ef475d1232ce59936563bbe4e/5B726BC1/t51.12442-15/sh0.08/e35/p640x640/38035134_221249845233474_6747640763024146432_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/ff89a52784b070742b3a20a8e66fee65/5B726D26/t51.12442-15/e35/38035134_221249845233474_6747640763024146432_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/7f73c9a2e9e023cb992050eed84c800b/5B729C5D/t51.12442-15/sh0.08/e35/p640x640/37970915_275334373066916_3183150178899066880_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/b7876d21a14741ec0d4d33e459edd77b/5B7368FA/t51.12442-15/e35/37970915_275334373066916_3183150178899066880_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>
</div>

    .stories-list>div {
    height: 220px;
    width: 125px;
    margin: 0 5px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.2);
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    cursor: pointer;
    overflow: hidden;
}
div {
    display: block;
}
.flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.position-relative {
    position: relative;
}
.stories-list>div>img {
    height: auto;
    width: 100%;
}
.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.story-hover, .story-hover>p {
    position: absolute;
    left: 0;
    right: 0;
}
.story-hover {
    background-color: rgba(0,0,0,.4);
    top: 0;
    bottom: 0;
    display: none;
    border-radius: 8px;
}
.stories-list>div:hover>.story-hover {
    display: block;
}
.story-hover>p {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    bottom: 15px;
    text-align: center;
}

https://codepen.io/anon/pen/XBOvQm

这就是我要实现的目标

On PC

Automatically changes it to a new line to fit the screen

这就是我想从codepen部分上的图像中提取出来的内容。使其换行以使其具有响应性

2 个答案:

答案 0 :(得分：1)

这是你想要的吗？

将flex-wrap:wrap;添加到

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap:wrap;
}

如果没有足够的空间，此属性将自动将项目推入下一行。

.stories-list>div {
  height: 220px;
  width: 125px;
  margin: 0 5px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .2);
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  cursor: pointer;
  overflow: hidden;
}

div {
  display: block;
}

.flex-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.position-relative {
  position: relative;
}

.stories-list>div>img {
  height: auto;
  width: 100%;
}

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap:wrap;
}

.story-hover,
.story-hover>p {
  position: absolute;
  left: 0;
  right: 0;
}

.story-hover {
  background-color: rgba(0, 0, 0, .4);
  top: 0;
  bottom: 0;
  display: none;
  border-radius: 8px;
}

.stories-list>div:hover>.story-hover {
  display: block;
}

.story-hover>p {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  bottom: 15px;
  text-align: center;
}
<h5>User Stories</h5>
<div class="stories-list d-flex ">
  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/578e883ef475d1232ce59936563bbe4e/5B726BC1/t51.12442-15/sh0.08/e35/p640x640/38035134_221249845233474_6747640763024146432_n.jpg" alt="story">
    <!---->
    <a href="https://scontent-ams3-1.cdninstagram.com/vp/ff89a52784b070742b3a20a8e66fee65/5B726D26/t51.12442-15/e35/38035134_221249845233474_6747640763024146432_n.jpg" target="_self" class="story-hover">
      <p>Download</p>
    </a>
    <!---->
    <!---->
    <!---->
  </div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/7f73c9a2e9e023cb992050eed84c800b/5B729C5D/t51.12442-15/sh0.08/e35/p640x640/37970915_275334373066916_3183150178899066880_n.jpg" alt="story">
    <!---->
    <a href="https://scontent-ams3-1.cdninstagram.com/vp/b7876d21a14741ec0d4d33e459edd77b/5B7368FA/t51.12442-15/e35/37970915_275334373066916_3183150178899066880_n.jpg" target="_self" class="story-hover">
      <p>Download</p>
    </a>
    <!---->
    <!---->
    <!---->
  </div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/578e883ef475d1232ce59936563bbe4e/5B726BC1/t51.12442-15/sh0.08/e35/p640x640/38035134_221249845233474_6747640763024146432_n.jpg" alt="story">
    <!---->
    <a href="https://scontent-ams3-1.cdninstagram.com/vp/ff89a52784b070742b3a20a8e66fee65/5B726D26/t51.12442-15/e35/38035134_221249845233474_6747640763024146432_n.jpg" target="_self" class="story-hover">
      <p>Download</p>
    </a>
    <!---->
    <!---->
    <!---->
  </div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/7f73c9a2e9e023cb992050eed84c800b/5B729C5D/t51.12442-15/sh0.08/e35/p640x640/37970915_275334373066916_3183150178899066880_n.jpg" alt="story">
    <!---->
    <a href="https://scontent-ams3-1.cdninstagram.com/vp/b7876d21a14741ec0d4d33e459edd77b/5B7368FA/t51.12442-15/e35/37970915_275334373066916_3183150178899066880_n.jpg" target="_self" class="story-hover">
      <p>Download</p>
    </a>
    <!---->
    <!---->
    <!---->
  </div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/578e883ef475d1232ce59936563bbe4e/5B726BC1/t51.12442-15/sh0.08/e35/p640x640/38035134_221249845233474_6747640763024146432_n.jpg" alt="story">
    <!---->
    <a href="https://scontent-ams3-1.cdninstagram.com/vp/ff89a52784b070742b3a20a8e66fee65/5B726D26/t51.12442-15/e35/38035134_221249845233474_6747640763024146432_n.jpg" target="_self" class="story-hover">
      <p>Download</p>
    </a>
    <!---->
    <!---->
    <!---->
  </div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/7f73c9a2e9e023cb992050eed84c800b/5B729C5D/t51.12442-15/sh0.08/e35/p640x640/37970915_275334373066916_3183150178899066880_n.jpg" alt="story">
    <!---->
    <a href="https://scontent-ams3-1.cdninstagram.com/vp/b7876d21a14741ec0d4d33e459edd77b/5B7368FA/t51.12442-15/e35/37970915_275334373066916_3183150178899066880_n.jpg" target="_self" class="story-hover">
      <p>Download</p>
    </a>
    <!---->
    <!---->
    <!---->
  </div>
</div>

答案 1 :(得分：0)

如果您只想让<div>元素尽可能多地容纳在一行中，但是如果不合适则将它们重排到多行中，最简单的方法可能是为他们提供display: inline-block样式（与<img>元素的默认样式相同，即，它有点像是大文本字符。）

（注意，我删除了“ flex”素材，没有它，一个简单的重熔效果很好）。

.stories-list>div {
    height: 220px;
    width: 125px;
    margin: 0 5px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.2);
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    cursor: pointer;
    overflow: hidden;
}
div {
    display: block;
}
.position-relative {
    position: relative;
    display: inline-block;
}
.stories-list>div>img {
    height: auto;
    width: 100%;
}
.story-hover, .story-hover>p {
    position: absolute;
    left: 0;
    right: 0;
}
.story-hover {
    background-color: rgba(0,0,0,.4);
    top: 0;
    bottom: 0;
    display: none;
    border-radius: 8px;
}
.stories-list>div:hover>.story-hover {
    display: block;
}
.story-hover>p {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    bottom: 15px;
    text-align: center;
}
<h5>User Stories</h5><div class="stories-list"><div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/578e883ef475d1232ce59936563bbe4e/5B726BC1/t51.12442-15/sh0.08/e35/p640x640/38035134_221249845233474_6747640763024146432_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/ff89a52784b070742b3a20a8e66fee65/5B726D26/t51.12442-15/e35/38035134_221249845233474_6747640763024146432_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/7f73c9a2e9e023cb992050eed84c800b/5B729C5D/t51.12442-15/sh0.08/e35/p640x640/37970915_275334373066916_3183150178899066880_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/b7876d21a14741ec0d4d33e459edd77b/5B7368FA/t51.12442-15/e35/37970915_275334373066916_3183150178899066880_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/578e883ef475d1232ce59936563bbe4e/5B726BC1/t51.12442-15/sh0.08/e35/p640x640/38035134_221249845233474_6747640763024146432_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/ff89a52784b070742b3a20a8e66fee65/5B726D26/t51.12442-15/e35/38035134_221249845233474_6747640763024146432_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/7f73c9a2e9e023cb992050eed84c800b/5B729C5D/t51.12442-15/sh0.08/e35/p640x640/37970915_275334373066916_3183150178899066880_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/b7876d21a14741ec0d4d33e459edd77b/5B7368FA/t51.12442-15/e35/37970915_275334373066916_3183150178899066880_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/578e883ef475d1232ce59936563bbe4e/5B726BC1/t51.12442-15/sh0.08/e35/p640x640/38035134_221249845233474_6747640763024146432_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/ff89a52784b070742b3a20a8e66fee65/5B726D26/t51.12442-15/e35/38035134_221249845233474_6747640763024146432_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/7f73c9a2e9e023cb992050eed84c800b/5B729C5D/t51.12442-15/sh0.08/e35/p640x640/37970915_275334373066916_3183150178899066880_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/b7876d21a14741ec0d4d33e459edd77b/5B7368FA/t51.12442-15/e35/37970915_275334373066916_3183150178899066880_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>
</div>

相关问题
最新问题