时间戳

首页 > 解决方案 > 当屏幕很大时，如何修复我的 CSS 代码以将左列向左移动？

html - 当屏幕很大时，如何修复我的 CSS 代码以将左列向左移动？

问题描述

我的反应式网站一直有问题；具体来说，当屏幕很大时，它不会在左上角（主要内容旁边）显示“关于我”和“热门帖子”。如果可能的话，我想修复它。现在，它显示在页脚旁边，这不是我想要的。

这是我正在使用的 HTML 和 CSS：

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style-main.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Electrolize&display=swap" rel="stylesheet">
</head>

<body>
  <!-- Begin Header -->
  <header role="banner">
    <h1>Incredible Indie Games</h1>
    <p>Reviews and Reccomendations for the Moderate Indie Gamer</p>
    <!-- Begin Navigation -->
    <nav role="navigation">
      <a href="#">Home</a>
      <a href="index-copy.html">About</a>
      <a href="#">Reviews</a>
      <a href="#">Contact</a>
    </nav>
    <!-- End Navigation -->
  </header>
  <!-- End Header -->
  <!-- Begin Main Content -->
  <main>
    <div class="row">
      <div class="leftcolumn">
        <article class="post">
          <h2> Ori and The Blind Forest: A Soulful and Stunning Action-Platformer </h2>
          <h5>Dec 7, 2017</h5>
          <p>Some text..</p>
          <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        </article>
        <article class="post">
          <h2>TITLE HEADING</h2>
          <h5>Title description, Sep 2, 2017</h5>
          <p>Some text..</p>
          <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        </article>
      </div>
    </div>
  </main>
  <aside>
    <div class="rightcolumn">
      <section class="post">
        <h2>About Me</h2>
        <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
      </section>
      <section class="post">
        <h3>Upcoming Posts</h3>
      </section>
    </div>
  </aside>

  <footer class="footer">
    <h2>Footer</h2>
  </footer>
</body>

</html>

这是CSS

* {
  box-sizing: border-box;
}


/* Add a background color with some padding */

body {
  font-family: Arial;
  padding: 12px;
  background: black;
}


/* Header*/


/*Blog Title */

header {
  padding: 10px;
  background: #91c7b1;
  font-size: 15px;
  text-align: center;
  font-family: "Electrolize", sans-serif;
}


/*navbar/*
/* top navigation bar style */

nav {
  background-color: #000;
  overflow: hidden;
}


/* navigation bar links */

nav a {
  color: White;
  float: left;
  font-family: "Electrolize", sans-serif;
  padding: 15px;
  text-align: center;
  text-decoration: underline;
}


/* Create two unequal columns that floats next to each other */


/* Left column */

.leftcolumn {
  float: left;
  width: 75%;
}


/* Right column */

.rightcolumn {
  float: right;
  width: 20%;
}


/* images work in progress at the moment */


/* Add a post layout for articles */

.post {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Footer */

footer {
  text-align: center;
  color: white;
}


/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 800px) {
  .leftcolumn,
  .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

标签： htmlcss

解决方案

您拥有的最佳选择是flex用于容器。在现代网站设计中使用float非常少见，并且float有很多缺点。我已经修改了你的 CSS 和 HTML 以反映一种flex做事方式。

你需要自己清理它（填充，弯曲比率等）。请参阅下面的更改以使其根据需要工作。

有关 flex 的更多信息，请参阅此：https ://developer.mozilla.org/en-US/docs/Web/CSS/flex

.rightcolumn {
  flex: 5;
}

.leftcolumn {
  flex: 1;
}

main > .row {
    display: flex;
}

@media screen and (max-width: 800px) {
  main > .row {
      flex-direction: column;
  }
}

<main>
<div class="row">
    <div class="leftcolumn">
        <section class="post">
            <h2>About Me</h2>
            <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
        </section>
        <section class="post">
            <h3>Upcoming Posts</h3>
        </section>
    </div>

    <div class="rightcolumn">
        <article class="post">
            <h2> Ori and The Blind Forest: A Soulful and Stunning Action-Platformer </h2>
            <h5>Dec 7, 2017</h5>
            <p>Some text..</p>
            <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        </article>
        <article class="post">
            <h2>TITLE HEADING</h2>
            <h5>Title description, Sep 2, 2017</h5>
            <p>Some text..</p>
            <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        </article>
    </div>
</div>
</main>

至于旁注，如果您这样做是为了完成一项任务，我建议您清理您的 HTML。类名并不能真正反映它们的用途，并且该row元素似乎是多余的。但一切都好，看起来不错。

推荐阅读