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

Question

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

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

Answer 1

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

那里有很多，但我更喜欢Twitter Bootstrap，它非常流行，因此得到了很好的支持。他们使用的网格系统非常可靠且响应迅速，我一直都在使用它！您甚至可以在他们的网站上自定义框架以仅包含您需要的部分（以防止过多的开销），或者下载源（.less）文件并自己编辑和编译它们（看起来更难，它们很好记录在案！）

对于您提供的屏幕截图，带有引导类的 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>