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

原文 标签 html css

我正在建立一个便笺网站,我希望将便笺组织成一个网格。随着窗口的缩小,音符需要重新排列以适应宽度,并允许垂直滚动。另外,我只想使用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>

最佳答案

它似乎是由标题中的UL引起的,是由导航LI的浮动引起的,这些溢出是浮动的,这会导致您的笔记被推出位置,并且笔记的宽度固定为300px,它们不会始终填充到屏幕上不同的宽度,您可以在注释上使用百分比宽度。

还有很多问题需要解决,但这里有一个百分比宽度和UL固定的粗略示例(对不起,我添加的类的命名约定不好):http://plnkr.co/edit/GBuDoMsqleI9vH7AwjwU?p=preview

Comic Sans正在套用至标头,并在Chrome中运作,也许您是要指定body标签?

从浮动.navbar-list标签的<nav>中删除​​边距,将宽度设置为100%,可以解决大多数浮动问题及其所引起的一些定位问题-还有更多的徽标仍需要解决,并且可能还有类似的问题。

这些问题中的一些是相当基本的CSS问题,可能值得检查一下诸如twitter bootstrapfoundation之类的框架,因为这些框架通常使您无需了解CSS的详细信息即可实现不需要的功能。您确实想学习然后就可以实现它,在浏览器中检查并尝试实现它们。

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

相关文章:

javascript - 数组中的随机图像显示图像标签错误

javascript - 如何通过js重新触发动画“变形”?

javascript - 与其他Transform函数异步制作不透明度动画

javascript - 数据表实现根本不起作用,Javascript/JQuery

html - 解决在小屏幕上重叠的视差滚动功能

html - HTML5 将如何影响内容和标题的 SEO?

javascript - knockout :indexOf返回-1时更加困惑

html - 左 float 时li元素下的未知边距

javascript - 自动将徽章放置在图像的 Angular 落

javascript - CSS模糊整个部分,而不模糊内部的div