三列

三列

关注
发信
关注(28)粉丝(399)

html - HTML5/CSS3:三列网站未填充视口(viewport)宽度

我很难让我不平坦的三列网站填充视口的整个宽度。理想情况下，左列将覆盖宽度的25％，中间50％，右边25％。如果我无法实现这一点，那么我会要求将所有三列的“单位”本身置于视口的中心。现在，所有三列都压缩到左侧。最终解决方案的可移植性对我来说非常重要：无论是在浏览器还是在设备方面，因此我都不想设置固定的宽度/高度。

Screenshot of current problem



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:[email protected]">[email protected]</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:[email protected]">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="[email protected]">[email protected]</a>
        </p>
        </footer>
    </body>
</html>





在此先感谢您的帮助！

最佳答案

如果需要，请参见以下代码。我采取了一些步骤来实现它。起初，您的选择器是错误的，例如.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:[email protected]">[email protected]</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:[email protected]">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="[email protected]">[email protected]</a>
    </p>
    </footer>

10-08 04:04
Powered by LMLPHP ©2024 三列 0.027723