如何使用 Html Css 制作博客布局答案

【问题标题】：How to make blog layout with Html Css如何使用 Html Css 制作博客布局
【发布时间】：2020-06-01 04:46:59
【问题描述】：

我是网页设计的初学者。我知道一些关于 CSS 布局的基础知识。我试图创建一个博客文章布局，如下图所示。 see image layout 请帮我这样做。

【问题讨论】：

【解决方案1】：

欢迎来到 StackOverflow！提醒一下，通常您会想来这里询问更具体的问题，以解决您的代码问题，或者解释您不太了解的奇怪行为。您的问题有点过于开放，无法在这里回答，但我可以帮助您开始：

对于初学者，开始考虑将图片中的每个框转换为 HTML div。如果您将该图片的每个部分分解为 div，则可以作为在其上添加 CSS 样式的良好基础。在你的情况下，你可能想要这样的东西：

<div id="articleList">
  <div id="article_1">
    <div id="articleImage_1">
      <img src="articleImage_1.jpg" alt="Picture #1">
    </div>
    <div id="articleContent_1">
      <div id="articleTags_1"></div>
      <div id="articleTitle_1"></div>
      <div id="articleAuthorNameAndCommentsSubheader_1"></div>
      <div id="articleBody_1"></div>
    </div>
  </div>
  <div id="article_2">
    <div id="articleImage_2">
      <img src="articleImage_2.jpg" alt="Picture #2">
    </div>
    <div id="articleContent_2">
      <div id="articleTags_2"></div>
      <div id="articleTitle_2"></div>
      <div id="articleAuthorNameAndCommentsSubheader_2"></div>
      <div id="articleBody_2"></div>
    </div>
  </div>
</div>

当然，您会在 for 循环或 .map() 类型函数中生成每一行。您还可以在每个 div 的“类”属性中添加 .css。

如果您觉得这有帮助，请选择我的帖子作为答案，请告诉我，如果您还有其他问题，请不要害羞:)

【讨论】：

【解决方案2】：

如果您了解 boostrap，那么您可以使用此 boostrap 卡来创建您想要的布局。这是它的示例代码。

<div class="card w-50">
<div class="card-img-top d-flex align-items-center bg-light">
  <div>
      <img class="img-fluid" src="http://via.placeholder.com/150x150/1f1a38/ffffff? 
       text=Image" alt="Card image cap">
  </div>
 <p class="col p-2 m-0">Text next to the right of the image</p>
</div>
</div>

【讨论】：