【发布时间】：2019-05-04 04:12:04
【问题描述】：
我目前正在创建一个网站来练习一些 CSS。不过，我的要求似乎不太好相处。我整天都在努力解决它，但我不断地通过解决其他问题来制造新问题。 这就是我试图让它看起来像主要部分内部的方式：
______________________________________
| | |
|section with | |
|fixed size | responsive figure |
|_____________| (image + caption, |
| | max height = |
|section with | combined hight of |
|fixed size | sections) |
| | |
|_____________|______________________|
我需要 figcaption 留在图像下方。 图像必须保持其比例，使用其宽度的所有可用空间（粘在左右边缘）。 调整大小时，我希望图形始终居中。
唯一还没有工作的是设置图像的最大高度。这是一件如此简单的事情，但不知何故我无法让它工作。 有趣的是，在这个过程中，这部分甚至在某些时候工作得很好，但是在将图形的位置调整到中心后就停止了工作。
这是我的代码：
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Detailseite zu einem Raum</title>
<meta charset="utf-8">
<link rel="icon" href="Koala.jpg">
<style>
main {
display: grid;
grid-template-columns: auto 1fr;
margin-bottom: 2em;
}
#figdiv {
grid-area: 1/2/3/3;
display: flex;
align-items: center;
/* Bild mittig zwischen zwei Rows*/
max-height: 100%;
}
figure {
margin: 0;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<header><img id="logo" src="Koala.jpg" alt="Koala Logo" width="65" height="65">Detailseite zu einem Raum</header>
<nav>
<ul>
<li>
<a href="listeVerfuegbareRaeume.html">Verfügbare Räume</a>
</li>
<li>
<a href="detailseiteBuchung.html">Detailseite zur Buchung</a>
</li>
<li>
<a href="raumBuchen.html">Raumbuchung anlegen</a>
</li>
</ul>
</nav>
<main>
<section>
<h4>Informationen zum Raum</h4>
<div>
<!-- Ursprünglich: id="raumInfo" -->
<ul id="raumInfoListe">
<li>Nummer: A.E.01</li>
<li>Bezeichnung: Hörsaal</li>
<li>Gebäude: EF42</li>
<li>Kapazität: XY</li>
<li>Ausstattungsmerkmale:
<ul>
<li>1 Beamer</li>
<li>2 Whiteboards</li>
</ul>
</li>
</ul>
<!-- <figure> semantische Auszeichnung der Abbildung
<img src="Office.jpg" alt="Foto des Raumes">
<figcaption>Abbildung: Foto des Raumes</figcaption>
</figure> -->
</div>
</section>
<section id="tabellenContainer">
<h4>Tabelle der Buchungen zum Raum</h4>
<table id="tabelleRaumBuchungen">
<thead>
<tr>
<th>Datum</th>
<th>Zeitraum</th>
<th>Bezeichnung</th>
</tr>
</thead>
<tbody>
<tr>
<td>12.10.2018</td>
<td>12:00-20:00 Uhr</td>
<td><a href="detailseiteBuchung.html">Kolloquium</a></td>
</tr>
<tr>
<td>13.10.2018</td>
<td>14:00-20:00 Uhr</td>
<td><a href="detailseiteBuchung.html">Kolloquium</a></td>
</tr>
<tr>
<td>14.10.2018</td>
<td>15:00-20:00 Uhr</td>
<td><a href="detailseiteBuchung.html">Kolloquium</a></td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
</section>
<div id="figdiv">
<figure>
<img src="Office.jpg" alt="Foto des Raumes">
<figcaption>Abbildung: Foto des Raumes</figcaption>
</figure>
</div>
</main>
<aside>
<label>Aktuelle Meldungen:</label>
<ul>
<li>11.10.2018, eine aktuelle Meldung</li>
<li>12.10.2018, noch eine aktuelle Meldung</li>
</ul>
</aside>
<footer>
<label>© Copyright 2018</label>
</footer>
</body>
</html>我在这里所做的可能会被简化，也请随时告诉我：D
（顺便说一句，我正在使用谷歌浏览器）
【问题讨论】：