在 CSS 中将类似 DIV 的页面转换为类似博客的布局？答案

【问题标题】：Converting DIV-like page into blog-like layout within CSS?在 CSS 中将类似 DIV 的页面转换为类似博客的布局？
【发布时间】：2018-08-20 18:28:28
【问题描述】：

这是我的 HTML 页面：

https://jsfiddle.net/62czmtvt/2/（实际查看 HTML 页面是否正常工作）

来自 JSFiddle 的代码：

:root {
  background-color: #FFFACD;
}

div.infoguide {
  width: 240px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  background-color: #F0FFF0;
}

div {
  margin: 5;
  padding: 0;
  border: 0;
  outline: 0;
}

A:link {
  text-decoration: underline;
  color: rgb(204, 51, 51);
}

A:visited {
  text-decoration: underline;
  color: rgb(204, 51, 51);
}

A:active {
  text-decoration: underline;
  color: rgb(204, 51, 51);
}

A:hover {
  text-decoration: underline;
  color: rgb(204, 51, 51);
}

body {
  margin-left: 0px;
  margin-top: 0px;
}

body,
td,
th {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: rgb(46, 46, 46);
  line-height: 16px;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  margin-bottom: 0px;
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 0px;
}

h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 0px;
}

h3 A:link {
  text-decoration: none;
  color: rgb(204, 51, 51);
}

h3 A:visited {
  text-decoration: none;
  color: rgb(204, 51, 51);
}

h3 A:active {
  text-decoration: none;
  color: rgb(204, 51, 51);
}

h3 A:hover {
  text-decoration: underline;
  color: rgb(204, 51, 51);
}

ul {
  margin-left: 1.5em;
  padding-left: 0px;
}

.info_data {
  border-color: rgb(137, 137, 137);
  border-style: solid;
  border-width: 1px;
  font-size: 11px;
  padding: 4px;
  text-align: center;
}

.news_headline {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  line-height: 22px;
}

.red {
  color: rgb(204, 51, 51);
}

.red_padded {
  color: rgb(204, 51, 51);
  padding: 4px 0px;
}

.redbg {
  background-color: rgb(220, 6, 0);
}

<title>First Drive: 2017 Porsche Panamera - Autos.ca</title>
<div class="infoguide">
  <H3>It works!</h3>
  <p>It works!</p>
</div>

<div class="info_data">
</div>
<div class="infoguide">
  <h2 class="red">A headline</h2>
  <p>It works!</p>
</div>

这是一个沙盒页面，用于杂志网站的类似博客的布局，我正在尝试实现这种外观：

Magazine article

但到目前为止，我还没有完全设法让它看起来像我想要的那样，它是一个三列 DIV，带有伪博客样式布局中的标题。

我一直在尝试我的 CSS 文件中的 :root 元素，这在 HTML5 页面中是鼓励还是不鼓励？

如果有任何建议或帮助，我将不胜感激！

【问题讨论】：

尽管它是一个 JSFiddle，但请尽量保持代码干净并使用缩进。这样就更容易发现任何关于缺少结束标签或错字的错误。对于使用模板的快速/运行启动，我建议使用引导程序，或者只是引导程序的网格系统。 getbootstrap.com

标签： css html layout css-multicolumn-layout

【解决方案1】：

为了实现三列，您需要稍微修改一下代码。

您需要一个包装器/容器围绕您尝试分离的三个 div，并为其提供 100% 的宽度或任何您想要的宽度。
您需要为三个 div 赋予相似的第二类名称，并为这些 div 应用浮点数和宽度。（还有其他方法，但这是干净的方法）。

CSS：

<style>
.page-container {
    width: 100%;
}

.infoguide { 
    float: left;
    width: 30%; 
}
</style>

HTML：

<title>First Drive: 2017 Porsche Panamera - Autos.ca</title>
    <div class="page-container">
        <div class="infoguide">
            <H3>It works!</h3>
            <p>It works!</p>
        </div>

        <div class="infoguide">
            <h1>Test Content</h1>
        </div>

        <div class="infoguide">
            <h2 class="red">A headline</h2>
            <p>It works!</p>
        </div>
    </div>

如果您不熟悉 flexbox，我也会考虑阅读它。这是制作具有许多列格式的 div 的响应式网页的好方法。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

【解决方案2】：

您将不得不进行一些更改：

将您希望彼此放在一边的 div 包装在另一个 div 中（我们称之为包装器）。
将包装器 div 的内容浮动到左侧，并为它们提供所需的宽度以获得布局。
确保包含一个 clearfix 以清除浮动。否则包装器 div 之后的内容将位于其下方。
使用媒体查询来调整移动设备的布局。

这是一个非常基本的示例，说明如何做到这一点。我为容器设置了一个宽度，浮动元素，为它们设置了一个宽度，然后使用媒体查询，我调整了布局，以便它们在视口低于 500 像素时填充整个宽度。

请注意，主栏和侧边栏之间没有任何空格。如果你想用一点边距将它们分开，请查看我的this answer。

https://jsfiddle.net/63o6mfy8/2/

还要确保像我在小提琴中那样清除浮动。

.page-container::after {
  content: '';
  display: table;
  clear: both;
}

【讨论】：

【解决方案3】：

你应该学习 Bootstrap。使用 Bootstrap，您可以轻松构建您想要的任何布局。现在，您可以从以下 sn-p 开始。为了清楚了解start learning Bootstrap here。

/* These are demo CSS to show the output nicely, do not use these */

.header {
  height: 100px;
  background: #ffa114;
}

.left-column {
  background: #4fff4f;
  height: 180px;
}

.right-column {
  background: #52a8ff;
}

.footer {
  height: 100px;
  background: #ffa114;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="header">
    Here is the title
  </div>
  <div class="container">
    <div class="row">
      <div class="left-column col-9">
        Left Column
      </div>
      <div class="right-column col-3">
        Right Column
      </div>
    </div>
  </div>
  <div class="footer">
    Bottom Content
  </div>
</div>

【讨论】：

谢谢！这是最好的解决方案...必须指向 Bootstrap 链接以供离线使用（将其备份为 ZIP 文件）

【解决方案4】：

我将重申显而易见的重复建议，以学习和利用 Bootstrap。我还在学习自己，所以我在这里包含的细节可能会帮助您了解如何利用已经存在的模板。在这个答案中，我修改了Jumbotron 模板，该模板包含在Bootstrap download 中。

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="../../../../favicon.ico">

  <title>Jumbotron Template for Bootstrap</title>

  <!-- Bootstrap core CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  
</head>

<body>

  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

  <main role="main">

    <div class="jumbotron"><!-- start jumbotron -->

      <div class="container"><!-- start title container -->
        <h1>First Drive: 2017 Porsche Panamera</h1>
        <h2>Awesome!!!</h2>
      </div><!-- end title container -->

    </div><!-- end jumbotron -->

    <div class="container"><!-- start article container -->

      <div class="row"><!-- start container row -->

        <div class="col-md-9"><!-- start article column -->
          <h2>Intro</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>

          <div class="row"><!-- start sub row -->

            <div class="col-md-9">
              <h3>Article</h3>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>

            <div class="col-md-3">
              <h3>Mini Side</h3>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>

          </div><!-- end sub row -->
        
        </div><!-- end article column -->

        <div class="col-md-3"><!-- start side column -->
          <h3>Side</h3>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
            commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
            risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div><!-- end side column -->

      </div><!-- end container row -->

      <hr>

    </div><!-- end article container -->

  </main>

  <footer class="container">
    <p>&copy; Company 2017-2018</p>
  </footer>

</body>

</html>

使用 Bootstrap 的优点之一是响应式设计。您需要更多详细信息来复制您提供的网站示例的完整外观，但我认为，除了一些广告空间之外，这应该可以帮助您开始，使用隔离标题所需的列，文章，添加图片等。

您还会注意到，我不需要更改 Bootstrap 中包含的任何 CSS，我只是引用了 CDN。

我希望这会有所帮助。

【讨论】：