将弹性项目扩展到全宽

Question

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

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

我正在尝试创建的内容：

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

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

.album {
  width: 50%;
}

img {
  width: 100%;
}

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

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

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

Answer 1

如果你想准确地保留这个 HTML 结构，并且一次只有一个弹出窗口，这种方法可以帮助你（参见代码片段）

\n\n

但我认为重组 HTML 代码会更好、更干净，例如，如果可能的话，将代码.expanded-content移出.album-container并用 JavaScript 更改其内容。

\n\n

\r\n

\r\n

.album-container {\r\n  display: flex;\r\n  flex-direction: row;\r\n  position: relative;\r\n}\r\n\r\n.album {\r\n  width: 50%;\r\n}\r\n\r\nimg {\r\n  width: 100%;\r\n}\r\n\r\n.expanded-content {\r\n  background: #212121;\r\n  color: #FFFFFF;\r\n  \r\n  position: absolute;\r\n  left: 0;\r\n  width: 100%;\r\n}

\r\n

<div class="album-container">\r\n  <album class=\'album\'>\r\n    <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">\r\n    \r\n  </album>\r\n    <album class=\'album\'>\r\n    <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">\r\n<div class="expanded-content">\r\n      <div>Whatever People Say I Am, That\xe2\x80\x99s What I\xe2\x80\x99m Not</div>\r\n      <div>Arctic Monkeys</div>\r\n    </div>\r\n  </album>\r\n</div>

\r\n

\r\n

\r\n

\n