将 DIV-like 页面转换为 CSS 内的 blog-like 布局？

Question

这是我的 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>

这是一个杂志网站 blog-like 布局的沙盒页面，我正在努力实现这种外观：

Magazine article

但到目前为止我还没有完全设法让它看起来像我想要的那样成为 three-column DIV 和 header 在 pseudo-blog-style布局。

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

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

Answer 1

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

您需要在您试图分开的三个 div 周围放置一个 wrapper/container，并为其指定 100% 宽度或您想要的任何宽度。
您需要为这三个 div 指定一个类似的第二个 class 名称，并对这些 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/

Answer 2

你应该学习Bootstrap。使用 Bootstrap 您可以轻松构建您想要的任何布局。现在您可以从以下代码片段开始。为了清楚理解 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>

Answer 3

我将重申明显的、重复的建议，以学习和利用 Bootstrap. I'm still learning myself, so maybe the details I've included here will assist you understanding how to leverage the templates that already exist. In this answer I've modified the Jumbotron template, which is included with the 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.

希望对您有所帮助。

Answer 4

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

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

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

请注意主栏和侧边栏之间没有任何 space。如果您想将它们分开一点，请查看我的。

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

还要确保像我在 fiddle 中那样清除浮动。

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

将 DIV-like 页面转换为 CSS 内的 blog-like 布局？

Converting DIV-like page into blog-like layout within CSS?

css

html

layout

css-multicolumn-layout