您好，我是 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 的新手，所以如果这是一个愚蠢的错误，我深表歉意!
最佳答案
使用这个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 -->
关于html - CSS 的间距/宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42665733/