html - 图像内联部分的重建。

Question

谁能告诉我如何使用 html 和 css 重建这个部分。我已经尝试了几次，但不能完全正确。我只需要展示一次，我就会从那里了解。目前，我正在使用 Squarespace，因此可以将内容拖到页面上，但我需要仅使用 html 和 css 重新插入它。感谢您的帮助

您可以从我的主页 www.jobspark.ca 获取正文

Answer 1

您提供的链接使用的是响应式网格系统。如果您是 html/css 的新手，那么您自己编写它可能有点费力。我建议你使用某种 css 框架。

有很多，但我更喜欢的是 Twitter Bootstrap ，它非常受欢迎，因此得到了很好的支持。 grid system他们使用非常可靠且 react 灵敏，我一直都在使用它!您甚至可以在他们的网站上自定义框架以仅包含您需要的部分(以防止过多的开销)，或者下载源(.less)文件并自己编辑和编译它们(这似乎更难，但它们很好记录在案!)

对于您提供的屏幕截图，带有 Bootstrap 类的 html 看起来像这样:

<div class='container-fluid'>

   <div class='row-fluid'>
      <article class='span4'>
         <img src='...' alt='...'/>
         <h2>The title</h2>
         <p>Lorem ipsum dolor sit amet</p>
         <a href='...'>Read more...</a>
      </article>

      <article class='span4'>
         ...
      </article>

      <article class='span4'>
         ...
      </article>

  </div>
</div>