我很难通过不均匀的三栏网站来填充视口的整个宽度。理想情况下，左列将覆盖宽度的25％，中间50％和右侧25％。如果我无法实现这一点，那么我会要求所有三列的“单位”本身在视口中居中。现在，所有三列都向左压扁。最终解决方案的可移植性对我来说非常重要：无论是在浏览器方面还是在设备方面，我都不希望将其设置为固定的宽度/高度。
body {
background-color: white;
color: white;
padding: 0px;
}
header {
background-color: #616161;
text-align: center;
width: 100%;
position: static;
padding-bottom: 15px;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #0d47a1;;
height: 40px;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #5472d3;
color: black;
}
main {
background-color: #0d47a1;
margin-top: 15px;
margin-bottom: 15px;
padding: 15px;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
}
.row {
display: table;
margin-left: auto;
margin-right: auto;
}
/* Clear floats after the columns */
.row:after {
content: "";
clear: both;
}
.column {
padding: 15px;
background-color: #373737;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
margin:15px;
float: left;
}
.left .right {
width: 25%;
}
/* Middle column */
.middle {
width: 50%;
}
.card {
height: 100px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
}
article {
background-color: #8e8e8e;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: white;
margin-top: 15px;
}
section {
background-color: #616161;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
}
footer {
background-color: #616161;
margin: auto;
text-align: center;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
/* unvisited link */
a:link {
color: #fcd734;
}
/* visited link */
a:visited {
color: #5472d3;
}
a:hover {
text-decoration: underline;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>DASK: Divorced and Separated Koinonia</h1>
<br text-decoration: italic>Turning the dusk of divorce into new dawn.</br>
</header>
<nav class="topnav">
</nav>
<main>
<div class="row">
<section class="column left">
<section>
<article class="card">
<h4>Profile</h4>
<p>Coming soon</p>
</article>
<article class="card">
<h4>Forum Posts</h4>
<p>Coming soon</p>
</article>
</section>
<section style="margin-top: 15px">
<h3>Events</h3>
<p>Coming soon</p>
</section>
</section>
<section class="column middle">
<section>
<h2>What is DASK?</h2>
<p>
DASK, or Divorced and Separated Koinonia, is a retreat designed by and for
people who have experienced divorce and separation. It is founded in the
Catholic religious tradition, but all are welcome. DASK is based on the popular
Koinonia retreat.
</p>
<h2>What is Koinonia?</h2>
<p>
Koinonia is retreat program that is popular nation-wide, but was first founded
in Springfield, IL for adults. The word "koinonia" itself comes from the Greek
word for "community". The Koinonia retreat is run by many parishes, dioceses,
and college campuses in order to form communities and friendships based in
Christ. DASK finds that the focus on community is helpful to people going
through divorce and/or separation; we find that it is easy to feel "alone"
going through this process.
</p>
<p>
The theme of every DASK weekend is the Paschal Mystery; that is, the life,
death, and resurrection of Jesus.
</p>
<h2>Where can I get more information?</h2>
<li>Download our <a href="static/img/dask_brochure_2018.pdf">brochure</a>.</li>
<li>Like our <a href="https://www.facebook.com/daskretreats">Facebook page</a>.</li>
<li>Email us at <a href="mailto:daskretreatsk@gmail.com">daskretreats@gmail.com</a>.</li>
<li>Follow us on Twitter <a href="https://www.twitter.com/daskretreats">@daskretreats</a>.</li>
<h2>How do I sign up?</h2>
<p>
<a href="static/img/dask_brochure_2018.pdf">Download our brochure</a>, complete
the registration form inside, and submit it via snail mail or
<a href="mailto:daskretreats@gmail.com">email</a>. We host two retreat weekends
a year: in the Spring at Columbia, IL, and in the Fall at Springfield, IL.
</p>
</section>
</section>
<section class="column right">
<section>
<h4>Donate</h4>
<p>Coming soon</p>
</section>
<section style="margin-top: 15px">
<article class="card">
<h4>Twitter</h4>
<p>Coming soon</p>
</article>
<article class="card">
<h4>News</h4>
<p>Coming soon</p>
</article>
</section>
</section>
</div>
</main>
<footer>
<p>
Copyright (C) 2018: Divorced and Separated Koinonia, under the <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA</a>.
<br><a href="daskretreats@gmail.com.com">daskretreats@gmail.com</a>
</p>
</footer>
</body>
</html>
提前感谢您的帮助！
答案 0 :(得分：0)
你能做什么你可以使用bootstrap为你的网站提供网格结构
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class='container'><!--This will span the viewport size-->
<div class='row'>
<!--start First column oneThird size-->
<div class='col-sm-4'>
content goes here......
</div>
<!--End First column oneThird size-->
<!--start second column oneThird size-->
<div class='col-sm-4'>
content goes here......
</div>
<!--End second column oneThird size-->
<!--start third column oneThird size-->
<div class='col-sm-4'>
content goes here......
</div>
<!--End third column oneThird size-->
</div>
</div>
</body>
答案 1 :(得分：0)
为什么您使用的<section class="column left"> css您只定义了.left和.right。
答案 2 :(得分：0)
修改main.css的以下CSS元素。它应该完成这项工作。
.row {
display: flex;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.left .right {
width: 25%;
flex:1;
}
.column {
padding: 15px;
background-color: #373737;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
margin:15px;
}
/* Middle column */
.middle {
width: 50%;
flex:1;
}
答案 3 :(得分：0)
如果您正在寻找，请参阅以下代码。我采取了一些措施来实现它。起初你的选择器错误就像.left .right一样，这是在左侧选择它.left, .right。
body {
background-color: white;
color: white;
padding: 0px;
}
/* Added */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
header {
background-color: #616161;
text-align: center;
width: 100%;
position: static;
padding-bottom: 15px;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #0d47a1;;
height: 40px;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #5472d3;
color: black;
}
main {
background-color: #0d47a1;
margin-top: 15px;
margin-bottom: 15px;
padding: 15px;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
}
.row {
display: table;
margin-left: auto;
margin-right: auto;
}
/* Clear floats after the columns */
.row:after {
content: "";
clear: both;
}
.column {
padding: 15px;
background-color: #373737;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
margin:15px;
float: left;
}
.left, .right {
width: calc(25% - 30px); // Deducted margin space 15+15 = 30px;
}
/* Middle column */
.middle {
width: calc(50% - 30px); // Deducted margin space 15+15 = 30px;
}
.card {
height: 100px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
}
article {
background-color: #8e8e8e;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: white;
margin-top: 15px;
}
section {
background-color: #616161;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
}
footer {
background-color: #616161;
margin: auto;
text-align: center;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
/* unvisited link */
a:link {
color: #fcd734;
}
/* visited link */
a:visited {
color: #5472d3;
}
a:hover {
text-decoration: underline;
}<header>
<h1>DASK: Divorced and Separated Koinonia</h1>
<br text-decoration: italic>Turning the dusk of divorce into new dawn.</br>
</header>
<nav class="topnav">
</nav>
<main>
<div class="row">
<section class="column left">
<section>
<article class="card">
<h4>Profile</h4>
<p>Coming soon</p>
</article>
<article class="card">
<h4>Forum Posts</h4>
<p>Coming soon</p>
</article>
</section>
<section style="margin-top: 15px">
<h3>Events</h3>
<p>Coming soon</p>
</section>
</section>
<section class="column middle">
<section>
<h2>What is DASK?</h2>
<p>
DASK, or Divorced and Separated Koinonia, is a retreat designed by and for
people who have experienced divorce and separation. It is founded in the
Catholic religious tradition, but all are welcome. DASK is based on the popular
Koinonia retreat.
</p>
<h2>What is Koinonia?</h2>
<p>
Koinonia is retreat program that is popular nation-wide, but was first founded
in Springfield, IL for adults. The word "koinonia" itself comes from the Greek
word for "community". The Koinonia retreat is run by many parishes, dioceses,
and college campuses in order to form communities and friendships based in
Christ. DASK finds that the focus on community is helpful to people going
through divorce and/or separation; we find that it is easy to feel "alone"
going through this process.
</p>
<p>
The theme of every DASK weekend is the Paschal Mystery; that is, the life,
death, and resurrection of Jesus.
</p>
<h2>Where can I get more information?</h2>
<li>Download our <a href="static/img/dask_brochure_2018.pdf">brochure</a>.</li>
<li>Like our <a href="https://www.facebook.com/daskretreats">Facebook page</a>.</li>
<li>Email us at <a href="mailto:daskretreatsk@gmail.com">daskretreats@gmail.com</a>.</li>
<li>Follow us on Twitter <a href="https://www.twitter.com/daskretreats">@daskretreats</a>.</li>
<h2>How do I sign up?</h2>
<p>
<a href="static/img/dask_brochure_2018.pdf">Download our brochure</a>, complete
the registration form inside, and submit it via snail mail or
<a href="mailto:daskretreats@gmail.com">email</a>. We host two retreat weekends
a year: in the Spring at Columbia, IL, and in the Fall at Springfield, IL.
</p>
</section>
</section>
<section class="column right">
<section>
<h4>Donate</h4>
<p>Coming soon</p>
</section>
<section style="margin-top: 15px">
<article class="card">
<h4>Twitter</h4>
<p>Coming soon</p>
</article>
<article class="card">
<h4>News</h4>
<p>Coming soon</p>
</article>
</section>
</section>
</div>
</main>
<footer>
<p>
Copyright (C) 2018: Divorced and Separated Koinonia, under the <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA</a>.
<br><a href="daskretreats@gmail.com.com">daskretreats@gmail.com</a>
</p>
</footer>