Question

我正在为我正在开展的练习项目提供一些帮助。我的内容div（.primary，.secondary和.tertiary）位于一个当前设置为100％宽度的包装器中（为了调试）。

我希望它能让.primary和.secondary在屏幕尺寸为779px及以上的情况下并排显示在彼此旁边，并且第三个设置在它们下方的包装宽度的100％处。

所有三个内容div还有我已经浮动的类col，所以理论上，我应该能够将.primary和.secondary设置为50％，他们应该高兴地坐在一起，对吗？

错误。

他们坐在彼此之下。它们的宽度恰好是包装器的一半（在google chrome中使用dev工具来检查）但是它们不会彼此相邻，直到我将它们的宽度设置为48％然后它们会在它们的右边留下间隙。

老实说，我无法做出正面或反面。对于想要复制和粘贴以查看怪异的人，我将在下面包含完整的代码。我还要注意，那里有一个规范化文件，从https://necolas.github.io/normalize.css/

下载

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>Dragon Ball Fan Site</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">
  </head>

  <body>

    <header class="main-header clearfix">
      <div class="container">
        <h1 class="title">Dragon Ball Fan Site</h1>
          <ul class="main-nav">
            <li><a href="index.html">Main</a></li>
            <li><a href="index.html">Manga</a></li>
            <li><a href="index.html">Anime</a></li>
            <li><a href="index.html">Video Games</a></li>
            <li><a href="register.html">Register</a></li>
          </ul>
    </header>

        <div class="banner">
          <img src="img/main-img.png" alt="Main Image, Goku" class="main-img">
          <h1 class="name">Dragon Ball Fansite</h1>
          <span class="tagline">A Site For Fans, By Fans</span>
        </div>
      </div>

      <div class="wrapper clearfix">
        <div class="secondary col">
          <h2>Welcome</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. </p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac. Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem. Praesent eleifend dignissim ligula. Nunc enim lectus, fringilla at odio vel, sagittis volutpat velit. Integer pretium ac nisl eget volutpat.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>

        <div class="primary col">
          <h2>About Dragon Ball</h2>
          <img src="img/cast.png" alt="Main Cast" class="cast">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac. Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem.</p>
        </div>

          <div class="tertiary col">
            <h2>About Us</h2>
            <ul>
              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
              <li>Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac.</li>
              <li>Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem.</li>
            </ul>
          </div>
        </div>
      </div>

        <footer class="main-footer">
          <span class="copyright"> &copy;Dragon Ball Fan Site 2018</span>
        </footer>
  </body>
</html>

/* =========
Fonts
========= */

@font-face {
  font-family: 'Roboto', sans-serif;
}

@@font-face {
  font-family: 'saiyain-sans';
  src: url(font/Saiyan-Sans.ttf);
}
/* =========
Elements
========= */
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', helvetica, sans-serif;
  font-size: 1.25em;
}

h1 {
  margin: 0;
  font-weight: 400;
  font-size: 2.441em;

}

h2 {
  font-size: 1.953em;
  padding-bottom: 1em;
  padding-left: 0;
  padding-right: 0;
}

p {
  line-height: 1em;
  margin: 0;
  padding: 0;
}

div {
  margin: 0;
}

/* =========
Classes
========= */

.main-header {
  text-align: center;
  color: #f85b1a;
  margin-bottom: 1em;
  padding-top: 2em;
}

.title {
  padding-bottom: 1em;
}

.main-nav li {
  padding-bottom: 0.5em;
  font-weight: 400;
}

.main-nav a {
  text-decoration: none;
  color: #f85b1a;
  display: block;
}

.banner {
  text-align: center;
  background-color: #f85b1a;
  color: #fff;
  padding: 1em;
  margin-bottom: 2em;
}

.main-img {
  border-radius: 50%;
  border: 3px solid #000;
  margin-bottom: 2em;
}

.name {
  font-family: 'saiyain-sans', 'Roboto',  sans-serif;
  margin-bottom: 0;
}

.wrapper {
  margin: 0 auto;
  width: 90%;
}

.col {
  border: 1px solid red;
}

.primary,
.secondary {
  margin-bottom: 1em;
}

.cast {
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

.main-footer {
  background-color: #072083;
  text-align: center;
  padding: 1em;
  margin-top: 1em;
}

.copyright {
  font-size: 0.8em;
  color: #8a9294;
}

/* =========
media queries
========= */

@media (min-width: 779px) {

.container {
  margin: 0 auto;
}

.main-header {
  padding: 1em;
}

.title,
.col {
  float: left;
}

.title {
  padding-top: 0;
  padding-bottom: 0;
  font-size: 1.25em;
}

.main-nav {
  float: right;
}

.main-nav li {
  display: inline-block;
  float: left;
  list-style: none;
  font-size: 1.25em;
  padding: 0 0.2em;
  border-right: 1px solid #8a9294;
}

.main-nav li:last-child {
  border-right: none;
}

.name {
  padding-bottom: 0.5em;
}

.tagline {
  font-size: 1.5em;
}

.wrapper {
  width: 100%;
  padding: 0;

}

.secondary,
.primary {
  width: 50%;
}

.copyright {
  padding: 2em;
}
/* =========
Clearfix
========= */

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

Answer 1

我终于明白了。这是边境框属性。添加任何填充和类似的东西推动它比包裹更大。我添加了border属性来测试它出错的地方，这只是增加了问题。

感谢大家花时间去看。

为什么我的布局不起作用？

1 个答案: