Question

我正在按照W3Schools上关于“如何-并排对齐图像”的教程进行操作，该教程位于https://www.w3schools.com/howto/howto_css_images_side_by_side.asp

我有一个名为column的以下div类，我试图在屏幕宽度变化时调整其大小，以适应移动设备和台式机上的不同屏幕尺寸。

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会在整个宽度范围内被推到新行。但是，当我调整屏幕大小时，图像将保持水平行，因为它们被压缩成3行。

关于屏幕宽度减小时如何使每个column div移到新行的任何想法？任何帮助将不胜感激！

Answer 1

~~[class="column"]选择器不会覆盖.column选择器，即使它放置在代码的后面，因为它是一个属性选择器，其特异性低于类选择器。~~ ¹

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

这应该有效：

.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特异性。但是，第二个参数（当将另一个类添加到元素时，它将停止用作选择器）仍然有效。

Answer 2

尝试一下。这是用于三列的布局，但是如果需要，您应该可以更改百分比。

.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

只需单击代码的全屏链接，然后调整窗口大小。这些DIV中的所有内容将相互叠加。

CSS @media div类未调整大小

2 个答案: