我需要將下面的影像分成兩行三張影像，并將新聞部分放在右側但在導航欄下方。我已經嘗試了各種方法，但無法讓它們正確對齊。鏈接和影像都需要可點擊，但我不確定我是否也正確地做到了這一點。
我的 HTML 檔案如下：
body {
margin: 0;
padding: 0;
font-family: Times, "Times New Roman", Georgia, serif;
font-size: 14px;
color: #333333;
width: 1024px
}
.navigation {
background-color: #333333;
color: #fefefe;
width: 1024px;
font-size: 120%;
border-bottom: 3px solid #ff0000;
}
img {
width: 200px;
height: 100px;
}
.news {
float: right;
width: 25%;
padding-left: 20px
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Walton Hall Museum of Odds & Ends</title>
<link rel="stylesheet" href="styles.css" />
<meta name="author" content="" />
<nav class="navigation">
<p>
<a href="index.html" title="index.html">Museum of Odds & Ends </a>
<a href="placeholder.html" title="placeholder.html">Visit Us</a>
<a href="placeholder.html" title="placeholder.html">Shop</a>
<a href="placeholder.html" title="placeholder.html">Our History</a>
</p>
</nav>
</head>
<body>
<h1><strong>Museum of Odds & Ends</strong></h1>
<p>Walton Hall, Milton Keynes</p>
<div class="contain">
<a href="https://www.europeana.eu/en/item/440/item_UBMLSJFMKZCDOGRRMBW2UY5RDAL3V4IP">
<img src="https://via.placeholder.com/400x300.jpg" alt="Budapest Chainbridge 1907" />
<p>Budapest Chainbridge 1907</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/369/_129030">
<img src="https://via.placeholder.com/400x300.jpg" alt="Three red-figure attic vases 5th centruy AD" />
<p>Three red-figure attic vases</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/325/MG061">
<img src="https://via.placeholder.com/400x300.jpg" alt="Bronze Enamel Ring Pin Early Medieval" />
<p>Bronze Enamel Ring Pin</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/9200271/BibliographicResource_3000058904600">
<img src="https://via.placeholder.com/400x300.jpg" alt="Glass-plate Slide by Erica Wagner" />
<p>Glass-plate Slide</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_3cd913c5_b586_4dd7_813b_14708e134f5e">
<img src="https://via.placeholder.com/400x300.jpg" alt="Oilpainting of Ettingen Village by Alois Kron" />
<p>Oilpainting of Ettingen Village</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_8a7b633f_8dfa_4bdb_ab43_5c7acb1d06ca">
<img src="https://via.placeholder.com/400x300.jpg" alt="Painting by Soja Feldmaier" />
<p>Painting by Soja Feldmaier</p>
</a>
</div>
<article class=news>
<h2>News</h2>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
</article>
</body>
</html>uj5u.com熱心網友回復：
.contain用一個div元素包裝類，然后使該div元素顯示為網格并使用grid-template-columnscss 屬性來實作這一點
見演示：
body {
margin: 0;
padding: 0;
font-family: Times, 'Times New Roman', Georgia, serif;
font-size: 14px;
color: #333333;
width: 1024px;
}
.navigation {
background-color: #333333;
color: #fefefe;
width: 1024px;
font-size: 120%;
border-bottom: 3px solid #ff0000;
}
img {
width: 200px;
height: 100px;
}
.news {
float: right;
width: 25%;
padding-left: 20px;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Walton Hall Museum of Odds & Ends</title>
<link rel="stylesheet" href="styles.css" />
<meta name="author" content="" />
</head>
<body>
<nav class="navigation">
<p>
<a href="index.html" title="index.html">Museum of Odds & Ends </a>
<a href="placeholder.html" title="placeholder.html">Visit Us</a>
<a href="placeholder.html" title="placeholder.html">Shop</a>
<a href="placeholder.html" title="placeholder.html">Our History</a>
</p>
</nav>
<h1><strong>Museum of Odds & Ends</strong></h1>
<p>Walton Hall, Milton Keynes</p>
<div class="wrapper">
<div class="contain">
<a href="https://www.europeana.eu/en/item/440/item_UBMLSJFMKZCDOGRRMBW2UY5RDAL3V4IP">
<img src="https://via.placeholder.com/400x300.jpg" alt="Budapest Chainbridge 1907" />
<p>Budapest Chainbridge 1907</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/369/_129030">
<img src="https://via.placeholder.com/400x300.jpg" alt="Three red-figure attic vases 5th centruy AD" />
<p>Three red-figure attic vases</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/325/MG061">
<img src="https://via.placeholder.com/400x300.jpg" alt="Bronze Enamel Ring Pin Early Medieval" />
<p>Bronze Enamel Ring Pin</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/9200271/BibliographicResource_3000058904600">
<img src="https://via.placeholder.com/400x300.jpg" alt="Glass-plate Slide by Erica Wagner" />
<p>Glass-plate Slide</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_3cd913c5_b586_4dd7_813b_14708e134f5e">
<img src="https://via.placeholder.com/400x300.jpg" alt="Oilpainting of Ettingen Village by Alois Kron" />
<p>Oilpainting of Ettingen Village</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_8a7b633f_8dfa_4bdb_ab43_5c7acb1d06ca">
<img src="https://via.placeholder.com/400x300.jpg" alt="Painting by Soja Feldmaier" />
<p>Painting by Soja Feldmaier</p>
</a>
</div>
</div>
<article class="news">
<h2>News</h2>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
</article>
</body>
</html>uj5u.com熱心網友回復：
/* CSS */
body {
margin: 0;
padding: 0;
font-family: Times, "Times New Roman", Georgia, serif;
font-size: 14px;
color: #333333;
width: 1024px
}
.navigation {
background-color: #333333;
color: #fefefe;
width: 1024px;
font-size: 120%;
border-bottom: 3px solid #ff0000;
}
img {
width: 200px;
height: 100px;
}
.news {
float: right;
width: 25%;
padding-left: 20px
}
div.container {
display: table;
}
div.contain {
width: calc(100% / 3);
float: left;
margin-bottom: 20px;
}<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Walton Hall Museum of Odds & Ends</title>
<link rel="stylesheet" href="styles.css" />
<meta name="author" content="" />
</head>
<body>
<nav class="navigation">
<p>
<a href="index.html" title="index.html">Museum of Odds & Ends </a>
<a href="placeholder.html" title="placeholder.html">Visit Us</a>
<a href="placeholder.html" title="placeholder.html">Shop</a>
<a href="placeholder.html" title="placeholder.html">Our History</a>
</p>
</nav>
<h1><strong>Museum of Odds & Ends</strong></h1>
<p>Walton Hall, Milton Keynes</p>
<div class="container">
<div class="contain">
<a href="https://www.europeana.eu/en/item/440/item_UBMLSJFMKZCDOGRRMBW2UY5RDAL3V4IP">
<img src="img.jpg" alt="Budapest Chainbridge 1907" />
<p>Budapest Chainbridge 1907</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/369/_129030">
<img src="img.jpg" alt="Three red-figure attic vases 5th centruy AD" />
<p>Three red-figure attic vases</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/325/MG061">
<img src="img.jpg" alt="Bronze Enamel Ring Pin Early Medieval" />
<p>Bronze Enamel Ring Pin</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/9200271/BibliographicResource_3000058904600">
<img src="img.jpg" alt="Glass-plate Slide by Erica Wagner" />
<p>Glass-plate Slide</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_3cd913c5_b586_4dd7_813b_14708e134f5e">
<img src="img.jpg" alt="Oilpainting of Ettingen Village by Alois Kron" />
<p>Oilpainting of Ettingen Village</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_8a7b633f_8dfa_4bdb_ab43_5c7acb1d06ca">
<img src="img.jpg" alt="Painting by Soja Feldmaier" />
<p>Painting by Soja Feldmaier</p>
</a>
</div>
</div>
<article class=news>
<h2>News</h2>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
</article>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/328502.html
上一篇：Django中的范圍樣式