Question

您好我是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很新，所以如果这是一个愚蠢的错误，我道歉！

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

Answer 2

由于您在定义宽度后添加了不同测量的边距，因此您无法完全控制水平尺寸。宽度（61％，20％和10％）加起来为91％，但你仍然不知道2em边距给你的东西，特别是因为EM是一个字符 - 当你放大或者放大时它会改变进行。

我的建议是使用flex。阅读它。它使用起来非常简单。以下是您要完成的内容的直接示例。

＆＃13;

plt.plot(Pts[:, 0], Pts[:,1], '_', color='black')

＆＃13;

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

＆＃13;

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

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

Answer 3

很高兴听到您的学习网页设计！由于你刚刚开始，我认为值得一提的是，虽然使用float是完全有效的，但更现代的方式（以及大多数框架的方向（例如Bootstrap 4））是使用{{ 3}}。 Flexbox可以让你实现同样的目标，但很多工作都是为你完成的，而且它的响应性更强。

浏览器对flexbox的支持非常好，现在看Flexbox。

我已经使用flexbox重新创建了你的想法。

正如我所说，这是未来之路，所以不妨学习它。

PS。确保你全屏查看，这样你就可以调整大小并看到flexbox魔法。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如果您需要，请here。

CSS的间距/宽度

3 个答案: