我写了一个网页，使用响应式网页设计（rwd），在相同宽度的网格中显示一批不同大小的图像。根据窗口拖动到的宽度，每个水平行中有4、3、2或1个单元格。我相信这使我的问题不同于我浏览过的其他问题，这些问题似乎使用了固定的列数或隐含的单元格大小知识。
网格有一个特殊的行为，我想改变，但不知道如何改变。每个水平行的高度似乎完全由调整窗口大小时最后一个在该行结束的图像的高度决定。我不控制图片的本机大小，这些图片是通过url从互联网上获取的。我依靠浏览器的渲染器调整图像大小以适应网格单元的宽度，并且我希望每个图像的高度都保持其与原始宽度的原始比例，这样就不会出现失真。
观察到的行为是这样的。当一行中的最后一个图像也是该行中最高的图像时，显示很好（在我看来，就是这样）。较短的图像在其底部自动填充任何背景设置，以将其单元格填充到高单元格的底部坐标。图像比例将保留。
但是，当一行上的最后一个图像不是该行上最高的图像时，最高的图像向下溢出到下一行，并抢占下一行该列中的单元格。我想找到一种方法，让每一行的高度由其最高图像的高度来确定，这样就不会有抢占，因为在我看来，这会使网格看起来不那么混乱。
我已经将我的页面缩减为一个完整的单文件html脚本，以说明所描述的行为，并嵌入了css和javascript。如果您选择在浏览器中运行该文件，则该文件应位于比手机宽的硬件平台上，以便您可以在观察至少两行或三行的情况下拖动窗口宽度的变化。在我的Windows10平台上，我已经在chrome、firefox、opera、edge甚至InternetExplorer中运行了这个脚本，所有这些平台的行为都是一样的。
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>rowHeight</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* ================================
* Styles for responsive web design
* ================================
* Adapted from W3Schools Responsive Web Design,
* at www.w3schools.com/css/css_rwd_grid.asp. In
* particular the 12-column grid layout and all the
* width percentages are copied from there.
*/
* {
box-sizing : border-box;
}
/**********************************************
| Extra-small devices (phones, 600px and down) |
**********************************************/
[class*="col-"] { width: 100%; }
/*****************************************************************
| Small devices (portrait tablets and large phones, 600px and up) |
*****************************************************************/
@media only screen and (min-width: 600px) {
.col-s-1 { width: 8.33%; }
.col-s-2 { width: 16.66%; }
.col-s-3 { width: 25%; }
.col-s-4 { width: 33.33%; }
.col-s-5 { width: 41.66%; }
.col-s-6 { width: 50%; }
.col-s-7 { width: 58.33%; }
.col-s-8 { width: 66.66%; }
.col-s-9 { width: 75%; }
.col-s-10 { width: 83.33%; }
.col-s-11 { width: 91.66%; }
.col-s-12 { width: 100%; }
}
/*****************************************************************
| Medium devices (landscape tablets, 768px and up) |
*****************************************************************/
@media only screen and (min-width: 768px) {
.col-m-1 { width: 8.33%; }
.col-m-2 { width: 16.66%; }
.col-m-3 { width: 25%; }
.col-m-4 { width: 33.33%; }
.col-m-5 { width: 41.66%; }
.col-m-6 { width: 50%; }
.col-m-7 { width: 58.33%; }
.col-m-8 { width: 66.66%; }
.col-m-9 { width: 75%; }
.col-m-10 { width: 83.33%; }
.col-m-11 { width: 91.66%; }
.col-m-12 { width: 100%; }
}
/*****************************************************************
| Large devices (laptops/desktops, 992px and up) |
*****************************************************************/
@media only screen and (min-width: 992px) {
.col-l-1 { width: 8.33%; }
.col-l-2 { width: 16.66%; }
.col-l-3 { width: 25%; }
.col-l-4 { width: 33.33%; }
.col-l-5 { width: 41.66%; }
.col-l-6 { width: 50%; }
.col-l-7 { width: 58.33%; }
.col-l-8 { width: 66.66%; }
.col-l-9 { width: 75%; }
.col-l-10 { width: 83.33%; }
.col-l-11 { width: 91.66%; }
.col-l-12 { width: 100%; }
}
/*****************************************************************
| Extra large devices (large laptops and desktops, 1200px and up) |
*****************************************************************/
@media only screen and (min-width:1200px) {
.col-xl-1 { width: 8.33%; }
.col-xl-2 { width: 16.66%; }
.col-xl-3 { width: 25%; }
.col-xl-4 { width: 33.33%; }
.col-xl-5 { width: 41.66%; }
.col-xl-6 { width: 50%; }
.col-xl-7 { width: 58.33%; }
.col-xl-8 { width: 66.66%; }
.col-xl-9 { width: 75%; }
.col-xl-10 { width: 83.33%; }
.col-xl-11 { width: 91.66%; }
.col-xl-12 { width: 100%; }
}
/* The syntax inside the square brackets is a CSS selector for any HTML element
whose class begins with (that's what the *= operator means) "col-". */
[class*="col-"] {
float : left;
padding : 1px 1px 0px 0px;
/* top right bottom left */
}
.row::after {
clear : both;
display : table;
}
/* ================================
* Styles specific to this web page
* ================================
*/
/* Just as a reminder,
#foo selects the single HTML element with id="foo",
.foo selects any HTML element with class="foo",
foo selects any HTML element with tag <foo>
fee fie foo (with the above decorations) selects any foo inside a fie inside a fee
/* If you see the #Main background-color it is either because
nothing was placed there, or what is there allows #Main to bleed through. */
#Main {
background-color : Orange;
margin : 0;
}
/* If you see the .item background-color it could be padding (if .item padding is not 0px),
or it could be that the .item content is text. Note that if .item margin is not 0px,
the margin is transparent and displays whatever is in the parent of the .item in that
region, and this behavior can not be overridden. */
.item {
background-color : Cyan;
margin : 0;
border : 1px Solid Black;
padding : 0px !important;
}
/* A figure inside .item is intended in this script to be just a container for its content,
desired to contribute nothing extra to the layout. */
.item figure {
margin : 0;
border : none;
padding : 0;
}
/* But figcaption inside figure is white text on a darker background. FWIW on my system
the rendered text font is the first one in the list below, Open Sans. */
.item figure figcaption {
font-family : "Open Sans","Lucida Sans Unicode",Verdana,Tahoma,"DejaVu Sans",sans-serif;
font-size : 12pt;
font-weight : normal;
text-align : center;
background-color : SaddleBrown;
color : White;
}
/* Finally, img inside figure has a gray ridged border, but with no margin outside the border
and no padding inside the border. If the image native size is less than the width of the
responsive web column, it is enlarged to 100% of that, but if exceeds the width of the
responsive web column it is shrunk to 100% of that. The height of the image is auto adjusted
up or down to preserve the image native proportions. */
.item figure img {
margin : 0;
border : 5px Ridge Gray;
padding : 0;
width : 100%;
max-width : 100%;
height : auto;
}
</style>
</head>
<body>
<div id="Main" class="col-12 col-s-12 col-m-12 col-l-12 col-xl-12">
<!-- xs s m l xl -->
<!-- 1/row 2/row 3/row 4/row 4/row -->
<div>
<div class="item col-12 col-s-6 col-m-4 col-l-3 col-xl-3">
<figure>
<figcaption>#1</figcaption>
<img src="https://jpg.nyctmc.org/674">
</figure>
</div>
<div class="item col-12 col-s-6 col-m-4 col-l-3 col-xl-3">
<figure>
<figcaption>#2</figcaption>
<img src="https://jpg.nyctmc.org/447">
</figure>
</div>
<div class="item col-12 col-s-6 col-m-4 col-l-3 col-xl-3">
<figure>
<figcaption>#3</figcaption>
<img src="https://jpg.nyctmc.org/440">
</figure>
</div>
<div class="item col-12 col-s-6 col-m-4 col-l-3 col-xl-3">
<figure>
<figcaption>#4 — Tall</figcaption>
<img src="https://jpg.nyctmc.org/439">
<!-- Actually, the #4 img native size isn't tall, it's narrow.
So, when the renderer increases its width, it also auto
increases its height, to preserve the native proportions. -->
</div>
<div class="item col-12 col-s-6 col-m-4 col-l-3 col-xl-3">
<figure>
<figcaption>#5</figcaption>
<img src="https://jpg.nyctmc.org/782">
</figure>
</div>
<div class="item col-12 col-s-6 col-m-4 col-l-3 col-xl-3">
<figure>
<figcaption>#6</figcaption>
<img src="https://jpg.nyctmc.org/968">
</figure>
</div>
<div class="item col-12 col-s-6 col-m-4 col-l-3 col-xl-3">
<figure>
<figcaption>#7</figcaption>
<img src="https://jpg.nyctmc.org/444">
</figure>
</div>
<div class="item col-12 col-s-6 col-m-4 col-l-3 col-xl-3">
<figure>
<figcaption>#8</figcaption>
<img src="https://jpg.nyctmc.org/923">
</figure>
</div>
<div class="item col-12 col-s-6 col-m-4 col-l-3 col-xl-3">
<figure>
<figcaption>#9</figcaption>
<img src="https://www.w3.org/2008/site/images/logo-w3c-scalable.svg">
</figure>
</div>
<div class="item col-12 col-s-6 col-m-4 col-l-3 col-xl-3">
<figure>
<figcaption>#10</figcaption>
<img src="https://www.w3.org/2008/site/images/logo-w3c-scalable.svg">
</figure>
</div>
<div class="item col-12 col-s-6 col-m-4 col-l-3 col-xl-3">
<figure>
<figcaption>#11</figcaption>
<img src="https://www.w3.org/2008/site/images/logo-w3c-scalable.svg">
</figure>
</div>
<div class="item col-12 col-s-6 col-m-4 col-l-3 col-xl-3">
<figure>
<figcaption>#12</figcaption>
<img src="https://www.w3.org/2008/site/images/logo-w3c-scalable.svg">
</figure>
</div>
</div>
</div>
</body>
</html>
暂无答案！
目前还没有任何答案，快来回答吧！