Question

我正在制作一个便利贴纸网站，我想将这些笔记整理成一个网格。随着窗口缩小，笔记需要重新排序以适应宽度，并允许垂直滚动。另外，我只想使用CSS

我目前将笔记设置为向左浮动，这允许我需要的大部分内容，但顶行总是偏移。我希望这些笔记能够将自己整理成列和行。我也试过display: inline-block，但这导致笔记变得杂乱无章。

一些不太重要的问题是：

为什么Comic Sans没有生效
如何删除右侧的额外空白区域。

＆＃13;

/*
     * This stylesheet should provide all of the styles for index.html.
     */

html,
body {
  margin: 0;
  padding: 0;
}
/*** HEADER Element Styling ***/

header {
  background-color: #FFFF01;
  font-family: "comic sans ms", cursive, sans-serif;
  width: 100%;
}
header h1 {
  position: relative;
  top: 15px;
  left: 15px;
  margin: 0;
}
header li {
  display: inline-block;
}
header a {
  color: #000;
  text-decoration: none;
}
/*** NAV Element Styling ***/

nav {
  background-color: #333;
  height: 25px;
  padding: 0;
}
nav a {
  text-decoration: none;
  color: #FFFFFF;
}
.navbar-item {
  padding: 5px;
  float: left;
}
.navbar-right {
  float: right;
}
/*** TODO Class Styling ***/

.todo {
  background-color: #FFFF63;
  float: left;
  width: 300px;
  height: 300px;
  margin: 20px;
}
.todo h2 {
  text-align: center;
  font-size: 36px;
}
.todo-body {
  font-size: 24px;
  text-align: left;
  margin: 15px;
}
.todo-body li {
  list-style-type: circle;
}
.todo a {
  color: #010100;
}
/*** DISSMISS-BUTTON Class Styling ***/

.dismiss-button {
  cursor: pointer;
  position: relative;
  float: right;
  top: 5px;
  right: 5px;
  font-size: 24px;
  visibility: hidden;
}
.todo:hover .dismiss-button {
  visibility: visible;
  position: relative;
  align-self: auto;
}
/*** ADD-NOTE CLASS Styling ***/

.add-note-button-container {
  border-radius: 50%;
  width: 65px;
  height: 65px;
  background-color: #FE0000;
  position: fixed;
  bottom: 40px;
  right: 40px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
.add-note-button-container:hover {
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.7);
}
/*** BUTTON Element Styling ***/

button {
  cursor: pointer;
  font-size: 50px;
  border: none;
  color: white;
  display: inline-block;
  background-color: transparent;
  position: relative;
  top: 7px;
  left: 12px;
}
/*** FOOTER Element Styling ***/

footer {
  position: fixed;
  height: 25px;
  width: 100%;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: 0;
  background-color: #313131;
}
.copyright {
  float: right;
  color: white;
  padding: 5px;
  margin: 0;
}

＆＃13;

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">
  <title>ToDoIt</title>

  <!-- This is a 3rd-party stylesheet for Font Awesome: http://fontawesome.io/ -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" media="screen">

  <link rel="stylesheet" href="style.css" media="screen">
</head>

<body>
  <header>

    <!-- The <i> tag below includes the sticky note icon from Font Awesome -->
    <h1><a href="/"><i class="fa fa-sticky-note-o"></i> ToDoIt</a></h1>

    <nav>
      <ul class="navbar-list">
        <li class="navbar-item"><a href="/">Home</a>
        </li>
        <li class="navbar-item"><a href="/about">About</a>
        </li>
        <li class="navbar-item navbar-right"><a href="#">Log out</a>
        </li>
      </ul>
    </nav>

  </header>

  <main>

    <section class="todo">
      <div class="dismiss-button">&times;</div>
      <h2>buy groceries</h2>
      <div class="todo-body">
        <ul class="todo-list">
          <li>milk</li>
          <li>tea</li>
          <li>flour</li>
          <li>bananas</li>
        </ul>
      </div>
    </section>

    <section class="todo">
      <div class="dismiss-button">&times;</div>
      <h2>grab a beer with Chris</h2>
      <div class="todo-body">
        <p class="indent-wrapped"><span class="where">where:</span> Squirrels</p>
        <p class="indent-wrapped"><span class="when">when:</span> Thursday 9/29, 4:00</p>
      </div>
    </section>

    <section class="todo">
      <div class="dismiss-button">&times;</div>
      <h2>take out the trash</h2>
      <div class="todo-body">
        <p class="indent-wrapped"><span class="when">when:</span> Monday Night</p>
      </div>
    </section>

    <section class="todo">
      <div class="dismiss-button">&times;</div>
      <h2>call the bank re: loan</h2>
      <div class="todo-body">
        <p class="indent-wrapped"><span class="who">who:</span> Betty</p>
        <p>541-757-1111</p>
      </div>
    </section>

    <section class="todo">
      <div class="dismiss-button">&times;</div>
      <h2>paint the bedroom</h2>
      <div class="todo-body">
        <p>probably need 2 gallons (polar-bear-in-a-blizzard white)</p>
      </div>
    </section>

    <div class="add-note-button-container">
      <button id="add-note-button">+</button>
    </div>

  </main>

  <footer>
    <div class="copyright">
      Copyright &copy; 2016
    </div>
  </footer>

</body>

</html>

＆＃13;

Answer 1

如果您想创建动态网格布局，请考虑了解css属性flex，可以在此处找到一个很好的快速指南： - Flex。

最重要的是设置宽度/高度比，使用百分比或vw / vh，或者将两者结合起来，这确实有助于流动性。

对于我的父差异我使用vw / vh然后对于子div我使用百分比。这样我发现百分比取父母的价值。我已经做了一个快速片段来表明这一点。

#parent {
  background-color: red;
  width: 100vw;
  height: 100vh;
  position: relative;
  }
#child1 {
  background-color: orange;
  width: 65%;
  height: 50%;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  }
#child2 {
  background-color: green;
  width: 35%;
  height: 75%;
  float: right;
  position: absolute;
  bottom: 0;
  right: 0;
  }

<div id="parent">
  <div id="child1"></div>
  <div id="child2"></div>
</div>

Answer 2

它似乎是由你的标题中的UL引起的，它是由你的导航LI上的溢出造成的，这会导致你的音符被推出位置，音符是固定的300px宽度，它们不会总是填充在不同宽度的屏幕上，您可以在笔记上使用百分比宽度。

还有很多问题需要解决，但是这里有一个粗略的例子，其中宽度百分比和UL已修复（抱歉，我添加的类的命名约定不是很好）：http://plnkr.co/edit/GBuDoMsqleI9vH7AwjwU?p=preview

Comic Sans正在应用于标题并且正在Chrome中运行，或许您打算定位身体标记？

移除.navbar-list浮动<nav>标记的边距，设置100％宽度可修复大多数浮动问题以及它创建的一些定位问题 - 还有一些仍需要解析和可能与徽标类似的问题。

其中一些问题是相当基本的CSS问题，可能值得查看一些框架，例如twitter bootstrap或foundation，因为这些框架通常允许您实现您不需要知道的内容更精细的CSS细节，或者如果你想学习，那么你可以实现它，在浏览器中检查并试验它们的实现。

将浮动元素组织到动态网格中

2 个答案: