CSS @media div class 未调整大小

Question

我在 "How TO - Align Images Side By Side" 上关注 W3Schools 的教程，位于 https://www.w3schools.com/howto/howto_css_images_side_by_side.asp

我有以下 div class 称为 column，我正在尝试在屏幕宽度发生变化时调整它的大小，以适应不同的屏幕尺寸移动和桌面。

HTML代码如下：

<div class="row">
    <div class="column">
        <img id="firstImage" style="width: 100%">
        <figcaption id="firstCaption"></figcaption>
    </div>
    <div class="column">
        <img id="secondImage" style="width: 100%">
        <figcaption id="secondCaption"</figcaption>
    </div>
    <div class="column">
        <img id="thirdImage" style="width: 100%">
        <figcaption id="thirdCaption"></figcaption>
    </div>
</div>

在桌面（默认）模式下，三个图像排成一行，如下所示：https://i.imgur.com/a/zg2j5rv.png 这是由以下 CSS 代码定义的：

.column {
    float: left;
    width: 33.33%;
    padding: 5px;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

但是当屏幕宽度达到768px或更小（手机屏幕）时，我打算让图片垂直排列，这样图片就会上下排列。我添加了以下 CSS 代码来设置此更改的样式：

@media only screen and (max-width: 768px) {

    [class="column"] {
         display: block;
         width: 100%;
    }

}

在上面的代码中，我的逻辑是让每个column div 以块的形式列出，其宽度横跨整个屏幕宽度。这样，每个 div 将被推到一个新行，而 div 跨越整个宽度。但是，当我调整屏幕大小时，图像仍保持在水平行中，因为它们被挤压成一行中的 3 个图像。

关于如何在屏幕宽度减小时让每个 column div 移动到新行的任何想法？非常感谢任何帮助！

Answer 1

试试这个。这是三列布局，但您应该可以根据需要更改百分比。

.col-container {
display: table;
width: 100%;
}

.imagegroup {
width: 100%;
background-color: #ffffff;
}

.img-container {
display: table;
float: left;
width: 33.3%;
}

@media only screen and (max-width: 500px) {
.img-container {
display: table;
float: left;
width: 100%;
}
}

<div class="imagegroup">
<div class="col-container">

<div class="img-container">
<p>Image 1 goes here</p>
</div>

<div class="img-container">
<p>Image 2 goes here</p>
</div>

<div class="img-container">
<p>Image 3 goes here</p>
</div>

</div>
</div>

它们现在应该堆叠起来。

UPDATE

只需单击代码的全屏 link，然后调整 window 的大小。这些 DIV 中的任何内容都会相互堆叠。

Answer 2

~~[class="column"] 选择器不会覆盖 .column 选择器，即使放在后面的代码中也是如此，因为它是一个属性选择器并且比 class 选择器具有更低的特异性。~~ ¹

您也应该在@media 查询中使用.column。注意 [class="stuff"] 是一个比 .stuff 差得多的选择器，因为它会在您向同一元素添加新的 class 时停止工作。

这应该有效：

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

@media only screen and (max-width: 768px) {
  .column {
     display: block;
     width: 100%;
  }
}

¹ 我刚刚测试过（以确保我的答案是正确的）并且 Chrome 和Firefox 现在足够聪明，可以认识到这样一个事实，即使 [class="column"] 是一个属性类型选择器，因为它引用了 class 属性，所以它们赋予它适当的 class 特异性。但是，第二个参数（当另一个 class 添加到元素时它停止作为选择器工作）仍然有效。

CSS @media div class 未调整大小

CSS @media div class not resizing

html

css

display

mobile-website