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

时间：2018-03-12 16:38:10

标签： html css html5 layout css-multicolumn-layout

这是我的HTML页面：

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

来自JSFiddle的代码：

＆＃13;
＆＃13; 
: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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

Magazine article

但到目前为止，我还没有设法让它看起来像我想成为一个带有标头的三列DIV的伪博客式布局。

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

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

4 个答案:

答案 0 :(得分：5)

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

  1. 你需要一个围绕你试图分开的三个div的包装/容器，并给它100％宽度或任何你想要的宽度。
  2. 您需要为三个div提供类似的第二个类名称，并为这些div应用浮点数和宽度。 （还有其他方法，但这是干净的方式）。

    3. 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/

答案 1 :(得分：2)

您必须做出一些改变：

  1. 在另一个div中将你想要彼此放在一边的div包裹起来（让我们把它称为包装器）。
  2. 将包装器div的内容浮动到左侧，并为它们提供所需的宽度以获得布局。
  3. 确保包含clearfix以清除浮动..或包装div将位于其下方之后的内容。
  4. 使用媒体查询调整移动设备的布局。

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

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

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

    还要确保像小提琴那样清除花车。

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

答案 2 :(得分：1)

你应该学习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>

答案 3 :(得分：1)

我将重申明显的，重复的建议，以学习和利用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。

我希望这会有所帮助。

相关问题
最新问题