html - 将 float 元素组织成动态网格

我正在制作一个便签网站，我想在其中将便签组织成网格。随着窗口缩小，注释需要重新排序以适合宽度，并允许垂直滚动。另外，我只想使用 CSS

我目前将音符设置为向左浮动，这样可以满足我的大部分需求，但顶行总是偏移。我希望注释能够按列和行排序。我也试过 display: inline-block 但这导致笔记变得杂乱无章。

一些不太重要的问题是:

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

/*
     * 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;
}

<!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>

最佳答案

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

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

对于我的父 diff，我使用 vw/vh，然后对于子 div，我使用百分比。这样我发现百分比取了 parent 的值(value)。我做了一个简短的片段来展示这一点。

#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>

关于html - 将 float 元素组织成动态网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39907939/

html - 将 float 元素组织成动态网格

上一篇：css - float DOM，固定位置 - Telerik Kendo-Mobile AppBuilder Icenium

下一篇：css - 我可以使用媒体查询设置全局变量吗？