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

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>

这是一个沙盒页面,用于杂志网站的博客布局,我正试图实现这种外观:

杂志文章

但到目前为止,我还没有设法让它看起来像我想成为一个三列DIV的方式,在一个伪博客风格的布局中有一个标题.

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

我将不胜感激任何建议或帮助!

Answer 1

为了实现三列,您需要稍微改变一下代码.

1. 你需要一个围绕你试图分开的三个div的包装器/容器,并给它100%的宽度或你想要的任何宽度.
2. 您需要为三个div提供类似的第二个类名称,并将float和width应用于这些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/