我再次将此标记为未解决 - 昨晚建议的解决方案非常有效，可以将内容放在移动和平板电脑 View 中应有的位置，但随后会弄乱桌面 View 。任何人都可以看看这个，看看你是否知道为什么？非常感谢!
我真的希望你能帮上忙。试图拼凑一个响应式网页。它在桌面模式下看起来不错，但在平板电脑模式下，蓝色按钮(午餐菜单、晚餐菜单和饮料)似乎与下一个标题共享一行(因此午餐菜单显示在晚餐菜单标题旁边，等等)。这是我的 HTML 和 CSS:
/*
BASE (MOBILE) SIZE
*/
/* typography */
body{
color:#666;
font-family:'Ubuntu', Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.4em;
font-weight:normal;
}
h1, h2, h3, h4, h5, h6{
font-weight:normal;
font-family:'Droid Serif', Arial, Helvetica, sans-serif;
line-height:1.5em;
margin:.45em 0;
padding:0;
}
/* links */
a,
a:visited,
a:active,
a:hover{color:#0099ff;}
a:hover{ text-decoration:none;}
/* Box sizing. */
*{ box-sizing:border-box;
-moz-box-sizing:border-box;}
/* structure */
.wrapper{
width: 92%;
margin: 0 auto;
}
header{
padding:15px 0;
}
#banner{
text-align:center;
}
#hero,
#page-header{
background:#f3f3f3;
border-top:1px solid #e2e2e2;
border-bottom:1px solid #e2e2e2;
padding:20px 0;
}
#hero h1{
line-height:1.2em;
margin-top:0px;
margin-bottom:10px;}
#content {
margin:40px 0;
}
p{ margin:0 0 1.5em;}
/* RESPONSIVE IMAGES */
img{ max-width:100%; height:auto;}
/*MAIN MENU*/
.menu-toggle{
display:block;
padding:10px;
margin:20px 0 0;
background:#666;
color:#fff;
cursor:pointer;
text-transform:uppercase;
font-size:20px;
}
.menu-toggle.toggled-on{
background:#0099ff;
}
.top-menu{
display:none;
}
.top-menu.toggled-on{
display:block;
position:relative;
z-index:10;
}
.top-menu{
clear:both;
margin-bottom:60px;
}
.top-menu li a {
background:#dadada;
display:block;
margin:1px 0;
padding:10px;
text-decoration:none;
}
.top-menu li a:hover{
background:#0099ff;
color:#fff;
}
.top-menu li li a {
background:#e8e8e8;
padding-left:40px;
}
.top-menu li li li a {
background:#efefef;
padding-left:80px;
}
/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
margin-bottom:40px;
/*positioning and padding*/
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
/*FOOTER*/
footer{
clear:both;
font-size:80%;
padding:20px 0;
align-content: center;
}
footer ul{
margin:0;
padding:0;
align-content: center;
}
/*colors and backgrounds*/
body{
background:#fff;
}
h1, h2, h3, h4, h5, h6{
color:#333;
}
footer{
background:#333;
color:#ccc;
align-content: center;
}
footer h1, footer h2, footer h3, footer h4{
color:#CCC;
margin-bottom:10px;
}
footer ul{
margin:0 0 0 8%;
align-content: center;
}
a.buttonlink{
background:#0099ff;
border-radius:7px;
color:#fff;
display:block;
float:left;
margin:10px 15px 10px 0;
padding:10px;
text-decoration:none;
}
a.buttonlink:hover{
background:#CCCCCC;
}
/* Contain floats*/
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: " ";
display: table;
}
.clearfix:after,
.container:after,
.row:after{
clear: both;
}
/*
TABLET & SMALLER LAPTOPS
*/
@media only screen and (min-width: 920px) {
.wrapper{
max-width: 1200px;
margin: .75em auto;
}
#banner{
float:left;
text-align:left;
margin-bottom:0px;
}
header{
padding:0;
}
#content {
float:left;
width:65%;
}
#content.wide-content{
float:none;
width:100%;
}
aside {
float:right;
width:30%;
}
/*** MAIN MENU - ESSENTIAL STYLES ***/
.menu-toggle{display:none;}
#menu-main-navigation{display:block;}
.top-menu, .top-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.top-menu ul {
position: absolute;
display:none;
width: 12em;
}
.top-menu ul li {
width: 100%;
}
.top-menu li:hover {
visibility: inherit;
}
.top-menu li {
float: left;
position: relative;
margin-left:1px;
}
.top-menu li li {
margin-left:0px;
}
.top-menu a {
display: block;
position: relative;
}
.top-menu li:hover ul,
.top-menu li.sfHover ul {
display:block;
left: 0;
top: 45px; /* match top ul list item height */
z-index: 99;
-webkit-box-shadow: 2px 3px 2px 0px rgba(00, 00, 00, .3);
box-shadow: 2px 3px 2px 0px rgba(00, 00, 00, .3);
}
ul.top-menu li:hover li ul,
ul.top-menu li.sfHover li ul {
top: -999em;
}
ul.top-menu li li:hover ul,
ul.top-menu li li.sfHover ul {
left: 12em; /* match ul width */
top: 0;
}
ul.top-menu li li:hover li ul,
ul.top-menu li li.sfHover li ul {
top: -999em;
}
ul.top-menu li li li:hover ul,
ul.top-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
#topnav, .top-menu {
float:right;
margin: .35em 0 0 0;
}
.top-menu a {
text-decoration:none;
}
.top-menu li a {
background:#fff;
margin:0;
padding:10px 20px;
height:45px;
}
.top-menu a, .top-menu a:visited {
color: #0099ff;
}
.top-menu li li a {
border-top: 1px solid rgba(255,255,255,.2);
background: #333; /*IN CASE VIEWED ON OLD IE*/
background:rgba(0,0,0,.6);
color: #fff;
padding-left:20px;
height:auto;
}
.top-menu li li a:visited{color:#fff;}
.top-menu li li li a,
.top-menu li.current * li a{
padding-left:20px;
background:rgba(0,0,0,.6);
}
.top-menu li:hover > a,
.top-menu li.current a{
color:#fff;
background:#0099ff;
}
.top-menu li li:hover > a{
color:#fff;
background:#0099ff;
}
/*GRID*/
/* & Columns : 12 */
.row{
margin-left: -15px;
margin-right: -15px;
}
.grid_1 { width: 8.33333333%; }
.grid_2 { width: 16.66666667%; }
.grid_3 { width: 25%; }
.grid_4 { width: 33.33333333%; }
.grid_5 { width: 41.66666667%; }
.grid_6 { width: 50%; }
.grid_7 { width: 58.33333333%; }
.grid_8 { width: 66.66666667%; }
.grid_9 { width: 75%; }
.grid_10 { width: 83.33333333%; }
.grid_11 { width: 91.66666667%; }
.grid_12 { width: 100%; }
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
float: left;
display: block;
}
.rightfloat{float:right;}
#hero [class*="grid_"] { margin-bottom:-20px;}
}
/* DESKTOP*/
@media only screen and (min-width: 1030px) {
} <!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>GREKOS' GREEK RESTAURANT</title>
<meta name="description" content="Grekos' Restaurant is a family-owned restaurant in Regina, Saskatchewan serving authentic Greek food.">
<meta name="keywords" content="Greek restaurant Regina">
<!-- Mobile viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<!-- CSS-->
<link href="http://fonts.googleapis.com/css?family=Droid+Serif|Ubuntu" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/basic-style.css">
<!-- end CSS-->
</style>
</head>
<body id="home">
<header class="wrapper clearfix">
<div id="banner">
<div id="logo"><a href="#"><img src="images/grekoslogo.png" alt="Grekos Logo" width="80"/></a></div>
</div>
<nav id="topnav" role="navigation">
<div class="menu-toggle">Menu</div>
<ul class="top-menu" id="menu-main-navigation">
<li class="current"><a href="basic.html">Home page</a></li>
<li><a href="#">Menus</a></li>
<li><a href="#">Reservations</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</nav>
</header>
<section id="hero" class="clearfix">
<div class="wrapper">
<div class="row">
<div class="grid_5">
<h1>Grekos' Greek Restaurant</h1>
<h3><i>Come Taste The Difference!</i></h3>
<p>Since 1979, Grekos' has been serving Regina patrons with tasty, authentic Greek food. The dream of George, Bob and Chris, three brothers from the Peloponnese region of southern greece, Grekos has earned the reputation of being one of Regina's outstanding restaurants - and more. It has become a gathering place for groups, business meetings, and family memories.</p>
<p>The real test for any restaurant is that people want to come back," said George. "that is wht we strive to achieve every day."</p>
<p>From the moment you step through the front doors, you enter a whole new world, with a cosy, relaxing ambiance, tantalizing food and always, a warm welcome. </p>
<p><a href="#" class="buttonlink">SPECIAL EVENTS</a></p>
<p><a href="#" class="buttonlink">CALL FOR RESERVATIONS</a></p>
</div>
<div class="grid_7 rightfloat">
<img src="images/interior.jpg" alt="Grekos interior picture" />
<p class="flex-caption">Grekos offers a warm, welcoming atmosphere.</p>
</div>
</div>
</div>
</section>
<!-- main content area -->
<div id="main" class="wrapper">
<!-- content area -->
<section id="content" class="wide-content">
<div class="row">
<div class="grid_4">
<h1 class="first-header">Lunch Menu</h1>
<img src="images/greeksalad.jpg" alt="Lunch Menu, Greek Salad photo
" width="400" />
<p>Quick service, a welcoming atmosphere and authentic Greek cuisine make Grekos' your "go to" lunch destination.</p>
<p><a href="#" class="buttonlink">Lunch Menu</a></p>
</div>
<div class="grid_4">
<h1 class="first-header">Dinner Menu</h1>
<img src="images/souvlaki.png" width="400" />
<p>Treat yourself and your family to traditional Hellenic (Greek) meals - we guarantee a memorable dining experience at affordable prices.</p>
<p><a href="#" class="buttonlink">Dinner Menu</a></p>
</div>
<div class="grid_4">
<h1 class="first-header">Drinks, Coffees & Desserts</h1>
<img src="images/drinks.png" width="400" />
<p>Accompany your meal with one of our refreshing beverages, and cap it off with our delectable desserts, including Baklava and Galaktoboureko... and of course, don't forget your Greek coffee afterward!</p>
<p><a href="#" class="buttonlink">Drinks, Coffees & Desserts Menu</a></p>
</div>
</div>
</section>
</div>
<!-- footer area -->
<footer>
<div class="wrapper clearfix">
<b>Grekos' Greek Restaurant </b> 4410 Albert Street, Regina | 306.584.3646
</div>
</footer><!-- #end footer area -->
</body>
</html>非常感谢您提供的任何见解!
干杯!
最佳答案
这不是最佳解决方案，但您需要在 .grid_4 类上使用 clear:both 来消除任何 float 元素，从而解决问题。
您需要在此部分更新您的 CSS:
/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
margin-bottom:40px;
/*positioning and padding*/
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
clear:both; /* <----- THIS LINE WAS ADDED */
}
预览:
/*
BASE (MOBILE) SIZE
*/
/* typography */
body{
color:#666;
font-family:'Ubuntu', Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.4em;
font-weight:normal;
}
h1, h2, h3, h4, h5, h6{
font-weight:normal;
font-family:'Droid Serif', Arial, Helvetica, sans-serif;
line-height:1.5em;
margin:.45em 0;
padding:0;
}
/* links */
a,
a:visited,
a:active,
a:hover{color:#0099ff;}
a:hover{ text-decoration:none;}
/* Box sizing. */
*{ box-sizing:border-box;
-moz-box-sizing:border-box;}
/* structure */
.wrapper{
width: 92%;
margin: 0 auto;
}
header{
padding:15px 0;
}
#banner{
text-align:center;
}
#hero,
#page-header{
background:#f3f3f3;
border-top:1px solid #e2e2e2;
border-bottom:1px solid #e2e2e2;
padding:20px 0;
}
#hero h1{
line-height:1.2em;
margin-top:0px;
margin-bottom:10px;}
#content {
margin:40px 0;
}
p{ margin:0 0 1.5em;}
/* RESPONSIVE IMAGES */
img{ max-width:100%; height:auto;}
/*MAIN MENU*/
.menu-toggle{
display:block;
padding:10px;
margin:20px 0 0;
background:#666;
color:#fff;
cursor:pointer;
text-transform:uppercase;
font-size:20px;
}
.menu-toggle.toggled-on{
background:#0099ff;
}
.top-menu{
display:none;
}
.top-menu.toggled-on{
display:block;
position:relative;
z-index:10;
}
.top-menu{
clear:both;
margin-bottom:60px;
}
.top-menu li a {
background:#dadada;
display:block;
margin:1px 0;
padding:10px;
text-decoration:none;
}
.top-menu li a:hover{
background:#0099ff;
color:#fff;
}
.top-menu li li a {
background:#e8e8e8;
padding-left:40px;
}
.top-menu li li li a {
background:#efefef;
padding-left:80px;
}
/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
margin-bottom:40px;
/*positioning and padding*/
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
clear:both; /* <----- THIS LINE WAS ADDED */
}
/*FOOTER*/
footer{
clear:both;
font-size:80%;
padding:20px 0;
align-content: center;
}
footer ul{
margin:0;
padding:0;
align-content: center;
}
/*colors and backgrounds*/
body{
background:#fff;
}
h1, h2, h3, h4, h5, h6{
color:#333;
}
footer{
background:#333;
color:#ccc;
align-content: center;
}
footer h1, footer h2, footer h3, footer h4{
color:#CCC;
margin-bottom:10px;
}
footer ul{
margin:0 0 0 8%;
align-content: center;
}
a.buttonlink{
background:#0099ff;
border-radius:7px;
color:#fff;
display:block;
float:left;
margin:10px 15px 10px 0;
padding:10px;
text-decoration:none;
}
a.buttonlink:hover{
background:#CCCCCC;
}
/* Contain floats*/
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: " ";
display: table;
}
.clearfix:after,
.container:after,
.row:after{
clear: both;
}
/*
TABLET & SMALLER LAPTOPS
*/
@media only screen and (min-width: 920px) {
.wrapper{
max-width: 1200px;
margin: .75em auto;
}
#banner{
float:left;
text-align:left;
margin-bottom:0px;
}
header{
padding:0;
}
#content {
float:left;
width:65%;
}
#content.wide-content{
float:none;
width:100%;
}
aside {
float:right;
width:30%;
}
/*** MAIN MENU - ESSENTIAL STYLES ***/
.menu-toggle{display:none;}
#menu-main-navigation{display:block;}
.top-menu, .top-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.top-menu ul {
position: absolute;
display:none;
width: 12em;
}
.top-menu ul li {
width: 100%;
}
.top-menu li:hover {
visibility: inherit;
}
.top-menu li {
float: left;
position: relative;
margin-left:1px;
}
.top-menu li li {
margin-left:0px;
}
.top-menu a {
display: block;
position: relative;
}
.top-menu li:hover ul,
.top-menu li.sfHover ul {
display:block;
left: 0;
top: 45px; /* match top ul list item height */
z-index: 99;
-webkit-box-shadow: 2px 3px 2px 0px rgba(00, 00, 00, .3);
box-shadow: 2px 3px 2px 0px rgba(00, 00, 00, .3);
}
ul.top-menu li:hover li ul,
ul.top-menu li.sfHover li ul {
top: -999em;
}
ul.top-menu li li:hover ul,
ul.top-menu li li.sfHover ul {
left: 12em; /* match ul width */
top: 0;
}
ul.top-menu li li:hover li ul,
ul.top-menu li li.sfHover li ul {
top: -999em;
}
ul.top-menu li li li:hover ul,
ul.top-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
#topnav, .top-menu {
float:right;
margin: .35em 0 0 0;
}
.top-menu a {
text-decoration:none;
}
.top-menu li a {
background:#fff;
margin:0;
padding:10px 20px;
height:45px;
}
.top-menu a, .top-menu a:visited {
color: #0099ff;
}
.top-menu li li a {
border-top: 1px solid rgba(255,255,255,.2);
background: #333; /*IN CASE VIEWED ON OLD IE*/
background:rgba(0,0,0,.6);
color: #fff;
padding-left:20px;
height:auto;
}
.top-menu li li a:visited{color:#fff;}
.top-menu li li li a,
.top-menu li.current * li a{
padding-left:20px;
background:rgba(0,0,0,.6);
}
.top-menu li:hover > a,
.top-menu li.current a{
color:#fff;
background:#0099ff;
}
.top-menu li li:hover > a{
color:#fff;
background:#0099ff;
}
/*GRID*/
/* & Columns : 12 */
.row{
margin-left: -15px;
margin-right: -15px;
}
.grid_1 { width: 8.33333333%; }
.grid_2 { width: 16.66666667%; }
.grid_3 { width: 25%; }
.grid_4 { width: 33.33333333%; }
.grid_5 { width: 41.66666667%; }
.grid_6 { width: 50%; }
.grid_7 { width: 58.33333333%; }
.grid_8 { width: 66.66666667%; }
.grid_9 { width: 75%; }
.grid_10 { width: 83.33333333%; }
.grid_11 { width: 91.66666667%; }
.grid_12 { width: 100%; }
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
float: left;
display: block;
}
.rightfloat{float:right;}
#hero [class*="grid_"] { margin-bottom:-20px;}
}
/* DESKTOP*/
@media only screen and (min-width: 1030px) {
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>GREKOS' GREEK RESTAURANT</title>
<meta name="description" content="Grekos' Restaurant is a family-owned restaurant in Regina, Saskatchewan serving authentic Greek food.">
<meta name="keywords" content="Greek restaurant Regina">
<!-- Mobile viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<!-- CSS-->
<link href="http://fonts.googleapis.com/css?family=Droid+Serif|Ubuntu" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/basic-style.css">
<!-- end CSS-->
</style>
</head>
<body id="home">
<header class="wrapper clearfix">
<div id="banner">
<div id="logo"><a href="#"><img src="images/grekoslogo.png" alt="Grekos Logo" width="80"/></a></div>
</div>
<nav id="topnav" role="navigation">
<div class="menu-toggle">Menu</div>
<ul class="top-menu" id="menu-main-navigation">
<li class="current"><a href="basic.html">Home page</a></li>
<li><a href="#">Menus</a></li>
<li><a href="#">Reservations</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</nav>
</header>
<section id="hero" class="clearfix">
<div class="wrapper">
<div class="row">
<div class="grid_5">
<h1>Grekos' Greek Restaurant</h1>
<h3><i>Come Taste The Difference!</i></h3>
<p>Since 1979, Grekos' has been serving Regina patrons with tasty, authentic Greek food. The dream of George, Bob and Chris, three brothers from the Peloponnese region of southern greece, Grekos has earned the reputation of being one of Regina's outstanding restaurants - and more. It has become a gathering place for groups, business meetings, and family memories.</p>
<p>The real test for any restaurant is that people want to come back," said George. "that is wht we strive to achieve every day."</p>
<p>From the moment you step through the front doors, you enter a whole new world, with a cosy, relaxing ambiance, tantalizing food and always, a warm welcome. </p>
<p><a href="#" class="buttonlink">SPECIAL EVENTS</a></p>
<p><a href="#" class="buttonlink">CALL FOR RESERVATIONS</a></p>
</div>
<div class="grid_7 rightfloat">
<img src="images/interior.jpg" alt="Grekos interior picture" />
<p class="flex-caption">Grekos offers a warm, welcoming atmosphere.</p>
</div>
</div>
</div>
</section>
<!-- main content area -->
<div id="main" class="wrapper">
<!-- content area -->
<section id="content" class="wide-content">
<div class="row">
<div class="grid_4">
<h1 class="first-header">Lunch Menu</h1>
<img src="images/greeksalad.jpg" alt="Lunch Menu, Greek Salad photo
" width="400" />
<p>Quick service, a welcoming atmosphere and authentic Greek cuisine make Grekos' your "go to" lunch destination.</p>
<p><a href="#" class="buttonlink">Lunch Menu</a></p>
</div>
<div class="grid_4">
<h1 class="first-header">Dinner Menu</h1>
<img src="images/souvlaki.png" width="400" />
<p>Treat yourself and your family to traditional Hellenic (Greek) meals - we guarantee a memorable dining experience at affordable prices.</p>
<p><a href="#" class="buttonlink">Dinner Menu</a></p>
</div>
<div class="grid_4">
<h1 class="first-header">Drinks, Coffees & Desserts</h1>
<img src="images/drinks.png" width="400" />
<p>Accompany your meal with one of our refreshing beverages, and cap it off with our delectable desserts, including Baklava and Galaktoboureko... and of course, don't forget your Greek coffee afterward!</p>
<p><a href="#" class="buttonlink">Drinks, Coffees & Desserts Menu</a></p>
</div>
</div>
</section>
</div>
<!-- footer area -->
<footer>
<div class="wrapper clearfix">
<b>Grekos' Greek Restaurant </b> 4410 Albert Street, Regina | 306.584.3646
</div>
</footer><!-- #end footer area -->
</body>
</html>关于html - 为什么我的按钮链接与平板电脑 View 中的标题共享同一行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43509384/