小编Jak*_*vel的帖子

将弹性项目扩展到全宽

我正在尝试创建自定义的“iTunes”样式扩展布局。但是，我遇到了一些问题。我原本预计会为此使用 flex-box。但我似乎无法做我想做的事情。

我附上了我试图创建的图像。本质上是一个可点击的缩略图网格，其中包含全宽的扩展内容。全宽方面是我正在努力解决的问题。我是否必须在扩展内容上设置明确的宽度，或者内容是否可以弯曲到全宽？

我正在尝试创建的内容：

我正在尝试创造什么

我附上了一个非常基本的 codepen 来演示我遇到的问题。如果第一张图像是“扩展”的，我希望它是全宽的。

.album-container {
  display: flex;
  flex-direction: row;
}

.album {
  width: 50%;
}

img {
  width: 100%;
}

.expanded-content {
  background: #212121;
  color: #FFFFFF;
}

Run Code Online (Sandbox Code Playgroud)

<div class="album-container">
  <album class='album'>
    <img alt="album-artwork" src="https://img.discogs.com/grVTPVqiRonKp5ly_ey-moBmO0c=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-11826116-1524151283-4015.jpeg.jpg">
    <div class="expanded-content">
      <div>Whatever People Say I Am, That’s What I’m Not</div>
      <div>Arctic Monkeys</div>
    </div>
  </album>
    <album class='album'>
    <img alt="album-artwork" src="https://img.discogs.com/grVTPVqiRonKp5ly_ey-moBmO0c=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-11826116-1524151283-4015.jpeg.jpg">
  </album>
</div>

Run Code Online (Sandbox Code Playgroud)

https://codepen.io/jakefauvel/pen/QoKdJP

html css grid-layout flexbox

Jak*_*vel

2019 03-05

5
推荐指数

1
解决办法

1158
查看次数