维护友好列表 - 图像

Question

我试图用HTML / CSS来解决问题，但我无法朝着正确的方向前进，并希望你们能给我一点正确的方向。

我想要做的是重新创建类似于以下网页（https://www.iculture.nl/）上的'Nieuws'部分的内容。

我可以重新创建外观（见下面的代码）。但它不允许轻松添加新消息。我尝试使用<li>修复它，但这似乎也没有用。由于图片不断重叠。

.news-item-0 {
    position: absolute;
    width: 990px;
    margin-top: 280px;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 20px;
    background-color: rgba(236, 236, 236, 0.5);
    border-bottom: 1px solid rgb(77, 76, 76);
}

.news-item-0 img, .news-item-1 img {
    height: 150px;
    width: 150px;
    float: left;
    padding-right: 20px;
}

.news-title-0, .news-subtitle-0, .news-main-0, .news-title-1, .news-subtitle-1, .news-main-1 {
    font-family: Calibri;
}

.news-title-0, .news-title-1 {
    font-weight: bold;
    font-size: 24px;
}

.news-subtitle-0, .news-subtitle-1 {
    font-style: italic;
    font-size: 12px;
    color: rgb(163, 163, 163);
}

.news-item-1 {
    position: absolute;
    width: 990px;
    margin-top: 280px;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 20px;
    background-color: rgba(236, 236, 236, 0.5);
    border-bottom: 1px solid rgb(77, 76, 76);
}

.news-item-1 img {
    height: 150px;
    width: 150px;
    float: left;
    padding-right: 20px;
}

Answer 1

假设这是你的出发点：

.news-item-0 {
    position: absolute;
    width: 990px;
    margin-top: 280px;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 20px;
    background-color: rgba(236, 236, 236, 0.5);
    border-bottom: 1px solid rgb(77, 76, 76);
}

.news-item-0 img, .news-item-1 img {
    height: 150px;
    width: 150px;
    float: left;
    padding-right: 20px;
}

.news-title-0, .news-subtitle-0, .news-main-0, .news-title-1, .news-subtitle-1, .news-main-1 {
    font-family: Calibri;
}

.news-title-0, .news-title-1 {
    font-weight: bold;
    font-size: 24px;
}

.news-subtitle-0, .news-subtitle-1 {
    font-style: italic;
    font-size: 12px;
    color: rgb(163, 163, 163);
}

.news-item-1 {
    position: absolute;
    width: 990px;
    margin-top: 280px;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 20px;
    background-color: rgba(236, 236, 236, 0.5);
    border-bottom: 1px solid rgb(77, 76, 76);
}

.news-item-1 img {
    height: 150px;
    width: 150px;
    float: left;
    padding-right: 20px;
}

<div class="news-item-0">
  <img/>
  <div class="news-title-0">Title0</div>
  <div class="news-subtitle-0">Subtitle0</div>
  <div class="news-main-0">Content0</div>
</div>

<div class="news-item-1">
  <img/>
  <div class="news-title-1">Title1</div>
  <div class="news-subtitle-1">Subtitle1</div>
  <div class="news-main-1">Content1</div>
</div>

将索引添加到类名中是一个坏主意，因为除非你像往常一样复制粘贴类名，否则你将无法重用任何CSS。更好的方法是定义一个名称并继续使用该名称。

如果您需要特定的帖子不同，您可以在CSS选择器中使用first-child和nth-child等伪类。

你的第二个问题来自使用position: absolute和margin-top: 280px。见：https://developer.mozilla.org/en-US/docs/Web/CSS/position

简而言之：您的新闻帖子在页面上获得了固定的位置。由于他们都是相同的位置，他们被堆叠在彼此的顶部。

.news-item {
  width: 990px;
  padding-bottom: 20px;
  padding-top: 20px;
  padding-left: 20px;
  background-color: rgba(236, 236, 236, 0.5);
  border-bottom: 1px solid rgb(77, 76, 76);
  min-height: 150px;
}

.news-item img {
  height: 150px;
  width: 150px;
  float: left;
  padding-right: 20px;
}

.news-title,
.news-subtitle,
.news-main {
  font-family: Calibri;
}

.news-title {
  font-weight: bold;
  font-size: 24px;
}

.news-subtitle {
  font-style: italic;
  font-size: 12px;
  color: rgb(163, 163, 163);
}

<div class="news-item">
  <img/>
  <div class="news-title">Title0</div>
  <div class="news-subtitle">Subtitle0</div>
  <div class="news-main">Content0</div>
</div>

<div class="news-item">
  <img/>
  <div class="news-title">Title1</div>
  <div class="news-subtitle">Subtitle1</div>
  <div class="news-main">Content1</div>
</div>