CSS 的间距/宽度答案

【问题标题】：Spacing/Width for CSSCSS 的间距/宽度
【发布时间】：2017-07-28 16:34:06
【问题描述】：

您好，我是 CSS 新手，正在尝试创建一个 3 列的基本网页。我的HTML如下

<!DOCTYPE html>
<html>
<head lang="{{ config('app.locale') }}">
  <title>Test Title</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../css/all.css" type="text/css"/>
</head>
<body>

<!--Top masthead of the website-->
<header id="welcome-masthead">
  <h1> Sexy Website Header </h1>
</header>

<!--Left portion of the website m-->
<article id="welcome-left-section">
  <nav>
    <a href="#welcome-masthead">- To Top</a> <br>
    <br>
    <a href="#welcome-bottom">- To Bottom</a> <br>
  </nav>
</article>

<!--Center portion of the website -->
<article id="welcome-center-section">
  <div>
    <p> Some text in the center section </p>
  </div>
</article>

<!--Right portion of the website-->
<article id="welcome-right-section">
  <div>
    <p> Some text in the right section </p>
  </div>
</article>

<footer id="welcome-bottom">
  <div>
    <p> This is the footer </p>
  </div>
</footer>

我已经创建了一个 css 文件，并且一直在使用边距和宽度设置，并且在大多数情况下，我已经完全创建了所有的功能和均匀间隔的所有屏幕分辨率（即放大和缩小并没有显着改变页面的外观）。但是，有一部分（中间部分和右侧部分之间的间隙）会随着页面的缩小而变得越来越大。我无法找到一种将两个部分“粘在一起”的解决方案，从而在两者之间保持 2em 的距离。

我的css如下。

#welcome-masthead {
    height: 6em;

    margin: 2em 5em;
    padding-top: 0.1px;

    white-space: nowrap;
    text-align: center;

    background-color: #e8eaed;
}

#welcome-left-section {
    float: left;

    padding: 0.8em;
    margin-right: 2em;
    margin-left: 2em;

    height: 1000px;
    width: 10%;

    background-color: #e8eaed;
    border: thin,solid,#000000;
}

#welcome-center-section {
    padding: 0.8em;
    margin-right: 2em;

    height: 1000px;
    width: 61%;

    display: inline-block;

    background-color: #e8eaed;
    border: thin,solid,#000000;
}

#welcome-right-section {
    float: right;

    padding: 0.8em;
    margin-right:2em;

    height: 1000px;
    width: 20%;

    background-color: #e8eaed;
    border:thin,solid,#000000;
}   

#welcome-bottom {
    width:auto;
    height: 5em;

    padding: 0.8em;
    margin: 2em;

    background-color: #e8eaed;
    border:thin,solid,#000000;
}

感谢任何帮助！我对 css 比较陌生，所以如果这是一个愚蠢的错误，我深表歉意！

【问题讨论】：

通常你应该使用class而不是id来设置CSS样式。此外，您的 CSS 中存在多个错误。最后，您可以制作一个 JSFiddle，以便我们可以更轻松地参考您的案例。

标签： html css formatting styling spacing

【解决方案1】：

使用这个 css 代码：

welcome-center-section,
welcome-right-section,
welcome-left-section {
    float: left;
    width: 33.3%;
    }
.clearfix {
    clear: both;
    display: block;
    }

注意：在右侧栏的结束标签下方添加 clearfix-class

<article id="welcome-right-section">
  <div>
    <p> Some text in the right section </p>
  </div>
</article>
<div class=clearfix></div> <!-- To reset float -->

【讨论】：

【解决方案2】：

您并没有真正完全控制水平尺寸，因为在定义宽度后，您添加了不同尺寸的边距。宽度（61%、20% 和 10%）加起来为 91%，但您仍然不知道 2em 边距给您带来什么，特别是因为 EM 是一个字符——当您放大或缩小时它会发生变化。

我的建议是使用 flex。阅读它。使用起来非常简单。这是您要完成的工作的简单示例。

.container {display: flex; justify-content: space-between; width: 100%}
.leftcolumn,.middlecolumn, .rightcolumn {width: 28%}

<div class="container">
<div class="leftcolumn">Left leaning material</div>
<div class="middlecolumn">Moderate material</div>
<div class="rightcolumn">Right leaning material</div>
</div>

要记住的另一件事是，填充实际上是使元素向外增长而不是向内推。这进一步混淆了测量。使用 flex，您可以消除边距和填充。如果您必须在这些列上进行填充，则只需将另一个 DIV 放置在具有边距的列内可能会更整洁（并且跨浏览器更正确）。

如果由于某种原因您不想使用 Flex，您可以随时在列之间创建间隔 DIV。

【讨论】：

【解决方案3】：

很高兴听到您学习网页设计！由于您刚刚开始，我认为值得一提的是，尽管使用 float 是完全有效的，但更现代的方式（以及大多数框架的发展方式（例如 Bootstrap 4））是使用 Flexbox。 Flexbox 可让您实现相同的目标，但为您完成了很多工作，而且它的响应更加友好。

现在浏览器对 flexbox 的支持非常好，请参阅 here。

我已经使用 flexbox 重新创建了您所做的工作，以给您一个想法。

正如我所说，这是未来的道路，所以不妨学习一下。

PS。确保全屏查看，以便调整大小并查看 flexbox 的魔力。

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
  height: 6em;
  background: #e8eaed;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
  height: 500px;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

@media all and (min-width: 600px) {
  .aside {
    flex: 1 auto;
  }
}
@media all and (min-width: 800px) {
  .main {
    flex: 3 0px;
  }

  .aside-1 {
    order: 1;
  }

  .main {
    order: 2;
  }

  .aside-2 {
    order: 3;
  }

  .footer {
    order: 4;
  }
}
body {
  padding: 2em;
}

<div class="wrapper">
  <header class="header"><h1> Sexy Website Header </h1></header>
  <article class="main">
    <p>Some text in the center section</p>  
  </article>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>

这是Fiddle，以备不时之需。

【讨论】：