时间戳

首页 > 解决方案 > CSS中图像的定位

html - CSS中图像的定位

问题描述

我需要将下面的图像分成两行，每行三个图像，并将新闻部分放在右侧但在导航栏下方。我已经尝试了各种方法，但无法让它们正确对齐。链接和图像都需要可点击，但我不确定我是否正确地做到了这一点。

我的 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 &amp; 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 &amp; 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 &amp; 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>

标签： htmlcss

解决方案

.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 &amp; 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 &amp; 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 &amp; 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>

推荐阅读