0
如果我可以讓你swing by Codepen:並有全屏看（媒體查詢arent完成），你會注意到我有問題解決佈局，而不使用溢出：隱藏。邊框和溢出導致問題
你會看到
一）一些行和圖標拖放到綠色部分 B）兩個其他部分下面的藍色部分下降，儘管邊界box'ing
如果我能溢出：全局隱藏，佈局顯示我想要的方式。但它有很多不需要的效果，並妨礙了使用漂亮的漢堡菜單。
問題
A）你爲什麼不三段排列起來，儘管使用float和視口設置爲33.33vw？我認爲這是關鍵問題。
/* Globale styles */
/* En af vores store udfordringer er og har været, overflow:hidden; */
/* Den er afgørende for at få forsiden til at fungere godt */
/* Men den hæmmer samtidig en masse andre muligheder */
* {
box-sizing:border-box;
overflow:hidden; /* If overflow is used, the layout works. If not, it completely disintegrates \t */
margin:0;
padding:0;
border-width:0;
}
/* Menulinje i toppen, simpel text */
nav
{
\t background-color:white;
\t height:30px;
\t Padding-left:30px;
\t Padding-top:5px;
\t font-weight:bold;
\t font-family: 'Roboto', sans-serif;
\t width:50vw;
\t text-transform:uppercase;
\t float:left;
}
/* Ikoner til sociale medier */
.somebar
{
\t background-color:white;
\t height:30px;
\t Padding-right:30px;
\t Padding-top:5px;
\t font-weight:bold;
\t font-family: 'Roboto', sans-serif;
\t width:50vw;
\t text-align:right;
\t text-transform:uppercase;
}
/* Farver til sociale medier og ikoner */
a
{
\t text-decoration:none;
\t color:black;
}
a:hover
{
\t color:red;
}
nav > a
{
\t color:black;
\t padding-right:7px;
}
nav > a:hover
{
\t color:red;
}
/* Sidefoden, simpel text */
footer
{
\t text-transform:uppercase;
\t clear:both;
\t background-color:white;
\t height:30px;
\t padding-top:5px;
\t padding-right:30px;
\t text-align:right;
\t font-weight:bold;
\t color:black;
\t font-family: 'Roboto', sans-serif;
}
.img_list
{
\t color:white;
\t list-style-type:none;
}
/* Menu styling, der er lidt tricky for at tage hensyn til vores layout */
/* Den globale overflow:hidden forhindrer brugen er burgermenu */
/* iphone størrelse */
@media only screen and (max-device-height: 640px) {
\t .colleft
\t {
\t \t background-image:url('images/wide_jump.jpg');
\t background-size:cover;
\t background-repeat:no-repeat;
\t background-position:center center;
\t \t height:calc(33vh - 40px);
\t \t border-color:white;
\t \t border-style:solid;
\t \t border-width:0px 30px 0px 30px;
\t \t line-height:calc(33vh - 80px);
\t \t text-align:center; \t
\t }
\t .colcenter
\t {
\t \t background-image:url('images/wide_kid.jpg');
\t background-size:cover;
\t background-repeat:no-repeat;
\t background-position:center center;
\t \t height:calc(33vh - 40px);
\t \t border-color:white;
\t \t border-style:solid;
\t \t border-width:0px 30px 0px 30px;
\t \t line-height:calc(33vh - 20px);
\t \t text-align:center; \t \t \t
\t }
\t .colright
\t {
\t \t background-image:url('images/wide_riders.jpg');
\t background-size:cover;
\t background-repeat:no-repeat;
\t background-position:center center;
\t \t height:calc(33vh - 40px);
\t \t border-color:white;
\t \t border-style:solid;
\t \t border-width:0px 30px 0px 30px;
\t \t line-height:calc(33vh - 20px);
\t \t text-align:center; \t \t \t
\t }
\t .colright > h1
\t {
\t \t vertical-align:middle;
\t \t text-align:center;
\t }
}
/* ipad størrelse */
@media only screen and (min-device-width: 640px) and (max-device-height: 1224px) {
\t .colleft
\t {
\t \t background-image:url('images/wide_jump.jpg');
\t background-size:cover;
\t background-repeat:no-repeat;
\t background-position:center center;
\t \t height:calc(33vh - 40px);
\t \t border-color:white;
\t \t border-style:solid;
\t \t border-width:0px 30px 0px 30px;
\t \t line-height:calc(33vh - 20px);
\t \t text-align:center;
\t }
\t .colcenter
\t {
\t \t background-image:url('images/wide_kid.jpg');
\t background-size:cover;
\t background-repeat:no-repeat;
\t background-position:center center;
\t \t height:calc(33vh - 40px);
\t \t border-color:white;
\t \t border-style:solid;
\t \t border-width:0px 30px 0px 30px;
\t \t line-height:calc(33vh - 20px);
\t \t text-align:center; \t \t \t
\t }
\t .colright
\t {
\t \t background-image:url('images/wide_riders.jpg');
\t background-size:cover;
\t background-repeat:no-repeat;
\t background-position:center center;
\t \t height:calc(33vh - 40px);
\t \t border-color:white;
\t \t border-style:solid;
\t \t border-width:0px 30px 0px 30px;
\t \t line-height:calc(33vh - 20px);
\t \t text-align:center; \t \t \t
\t }
\t .colcenter_content
\t {
\t \t background-color:lightgrey;
\t \t min-height:height:calc(33vh - 40px);
\t \t border-color:white;
\t \t border-style:solid;
\t \t border-width:0px 30px 0px 30px;
\t \t padding:20px;
\t } \t
\t .colright_content
\t {
\t \t background-color:lightgrey;
\t \t min-height:calc(100vh - 80px); \t \t
\t \t border-color:white;
\t \t border-style:solid;
\t \t border-width:0px 30px 0px 30px;
\t \t padding:20px;
\t } \t
\t .art_center
\t {
\t line-height: 1.2;
\t display: inline-block;
\t vertical-align: middle;
\t }
}
/* Standard pc og skærmne */
@media only screen and (min-width : 1224px) {
\t h1
\t {
\t \t font-size:30px;
\t \t margin:0px;
\t \t font-family: sans-serif;
\t \t text-transform: uppercase;
\t \t font-size:30px;
\t \t color:white; \t
\t }
\t .h1_back
\t {
\t \t -moz-border-radius: 50px;
\t \t -webkit-border-radius: 50px;
\t \t border-radius: 50px; /* future proofing */
\t \t -khtml-border-radius: 50px;
\t \t background-color:black;
\t \t display:inline-block;
\t \t width:70%;
\t \t height:80px;
\t \t opacity: 0.5;
\t }
\t .colleft
\t {
\t \t width:33.3333vw;
\t \t background-image:url('images/high_jump.jpg');;
\t \t float:left;
\t \t height:calc(100vh - 80px);
\t \t border-width:0px 0px 0px 30px;
\t \t line-height:calc(100vh - 80px);
\t \t text-align:center;
\t \t background-color:red;
\t }
\t .colcenter
\t {
\t \t width:33.3333vw;
\t \t background-image:url('images/high_kid.jpg');
\t \t float:left;
\t \t height:calc(100vh - 80px); \t \t
\t \t border-width:0px 0px 0px 0px;
\t \t line-height:calc(100vh - 80px);
\t \t text-align:center;
\t \t background-color:green; \t
\t }
\t .colright
\t {
\t \t width:33vw;
\t \t background-image:url('images/high_riders.jpg');
\t \t float:left;
\t \t height:calc(100vh - 80px); \t \t
\t \t border-width:0px 30px 0px 0px;
\t \t line-height:calc(100vh - 80px);
\t \t text-align:center;
\t \t background-color:blue;
\t }
\t .leftie \t \t /* rette op på border, når kolonne style bruges på subpages */
\t {
\t \t border-width:0px 0px 0px 30px !important;
\t }
\t .colcenter_content
\t {
\t \t width:33.3333vw;
\t \t background-color:lightgrey;
\t \t float:left;
\t \t height:calc(100vh - 80px); \t \t
\t \t border-color:white;
\t \t border-style:solid;
\t \t border-width:0px 0px 0px 0px;
\t \t padding-left:40px;
\t \t padding-right:40px; \t \t
\t }
\t .colcenter_content h1
\t {
\t \t font-size:30px;
\t \t color:black;
\t \t margin-bottom:20px;
\t }
\t .colright_content
\t {
\t \t width:33.3333vw;
\t \t background-color:lightgrey;
\t \t float:left;
\t \t height:calc(100vh - 80px); \t \t
\t \t border-color:white;
\t \t border-style:solid;
\t \t border-width:0px 30px 0px 0px;
\t \t padding:20px;
\t } \t
\t .video_style
\t {
\t \t height:calc((100vh - 260px)/3);
\t \t margin-bottom:20px;
\t \t width:100%;
\t \t border-width:5px;
\t \t border-style:line;
\t \t border-color:white;
\t }
\t .art_center
\t {
\t line-height: 1.2;
\t display: inline-block;
\t vertical-align: middle \t
}
}<!-- Sidehoved -->
\t <header>
\t \t <nav>
\t \t \t <a href="#">Forside</a>
\t \t \t <a href="#">Kontakt</a>
\t \t \t <a href="#">Formalia</a> \t \t \t
\t \t </nav>
\t \t <div class="somebar">
\t \t \t <a href="https://www.facebook.com/K%C3%B8ge-BMX-Klub-226506560882006/?fref=ts">facebook <i class="fa fa-facebook-official" aria-hidden="true"></i> </a>
\t \t \t <a href="http://www.youtube.com"> youtube <i class="fa fa-youtube" aria-hidden="true"></i></a>
\t \t </div>
\t </header>
<!--
\t I modsætning til de øvrige sider, har forsiden et unikt udseende, hvor billederne skal dominere.
\t Venstre kolonne
-->
\t <a href="kom_og_moed.htm" class="query_left">
\t \t <section class="colleft">
\t \t \t <div class="h1_back">
\t \t \t \t <h1>Kom og mød os</h1>
\t \t \t </div>
\t \t \t <ul class="img_list">
\t \t \t \t <li>Prøv BMX helt gratis!</li>
\t \t \t \t <li>Snak med vores trænere</li>
\t \t \t \t <li>Hvornår træner vi</li> \t \t \t \t \t \t \t \t
\t \t \t </ul>
\t \t </section>
\t </a>
<!---
\t Center kolonne indhold
-->
你可以嘗試改說嗎？我沒有看到任何圖標，以及Some行是什麼意思？ –