html - CSS使这个响应

标签 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 部分的图像制作的。使其换行以使其响应

最佳答案

这是你想要的吗？

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

关于html - CSS使这个响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51809961/

上一篇：javascript - CSS/JS 滚动一个较低的 z-index div

下一篇：html - 如何避免图像中显示的空白？

相关文章：

css - 无法在 prefixr.com 中编写代码

html - 滚动网站后删除 html 焦点

html - 三 Angular 形 div css 阴影

html - Bootstrap 3 : Fitting video to grid

css - CSS文件中的相对路径是相对于CSS文件的吗？

html - 更改 Bootstrap 表中的排序图标

html - 奇数空白 : pre behavior inside floated parent

html - 响应式菜单错误

Javascript 警告框不必要地提交表单

JavaScript-如何将 "message"div 更改为黄色

©2024 IT工具网  联系我们