响应网格出现右侧间隙
您好我已经尝试开发Skeleton Framework并调整了网格设计。虽然一切都很慢，但我无法找到右边那个小间隙的来源。我的意思见下图。我已经附加了CSS和HTML页面。为一堆乱七八糟的CSS乱七八糟地道歉。任何建议都会很棒，因为我觉得此时我可能无法看到穿过森林的树木。
/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box;
}
/* For devices larger than 400px */
@media (min-width: 400px) {
.container {
width: 85%;
padding: 0;
}
}
/* For devices larger than 550px */
@media (min-width: 1050px) {
.container {
width: 80%;
}
.column,
.columns {
margin-left: 0;
}
.column:first-child,
.columns:first-child {
margin-left: 0;
}
.one.column,
.one.columns {
width: 8.333%;
}
.two.columns {
width: 16.66%;
}
.three.columns {
width: 25%;
}
.four.columns {
width: 33.33%;
}
.five.columns {
width: 41.66%;
}
.six.columns {
width: 50%;
}
.seven.columns {
width: 58.33%;
}
.eight.columns {
width: 66.663%;
}
.nine.columns {
width: 75%;
}
.ten.columns {
width: 83.33%;
}
.eleven.columns {
width: 91.66%;
}
.twelve.columns {
width: 100%;
margin-left: 0;
}
.one-third.column {
width: 30.6666666667%;
}
.two-thirds.column {
width: 65.3333333333%;
}
.one-half.column {
width: 48%;
}
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns {
margin-left: 8.66666666667%;
}
.offset-by-two.column,
.offset-by-two.columns {
margin-left: 17.3333333333%;
}
.offset-by-three.column,
.offset-by-three.columns {
margin-left: 26%;
}
.offset-by-four.column,
.offset-by-four.columns {
margin-left: 34.6666666667%;
}
.offset-by-five.column,
.offset-by-five.columns {
margin-left: 43.3333333333%;
}
.offset-by-six.column,
.offset-by-six.columns {
margin-left: 52%;
}
.offset-by-seven.column,
.offset-by-seven.columns {
margin-left: 60.6666666667%;
}
.offset-by-eight.column,
.offset-by-eight.columns {
margin-left: 69.3333333333%;
}
.offset-by-nine.column,
.offset-by-nine.columns {
margin-left: 78.0%;
}
.offset-by-ten.column,
.offset-by-ten.columns {
margin-left: 86.6666666667%;
}
.offset-by-eleven.column,
.offset-by-eleven.columns {
margin-left: 95.3333333333%;
}
.offset-by-one-third.column,
.offset-by-one-third.columns {
margin-left: 34.6666666667%;
}
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns {
margin-left: 69.3333333333%;
}
.offset-by-one-half.column,
.offset-by-one-half.columns {
margin-left: 52%;
}
}
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
font-size: 62.5%;
}
body {
font-size: 1.5em;
/* currently ems cause chrome bug misinterpreting rems on body element */
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222;
}
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300;
}
h1 {
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.1rem;
}
h2 {
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -.1rem;
}
h3 {
font-size: 3.0rem;
line-height: 1.3;
letter-spacing: -.1rem;
}
h4 {
font-size: 2.4rem;
line-height: 1.35;
letter-spacing: -.08rem;
}
h5 {
font-size: 1.8rem;
line-height: 1.5;
letter-spacing: -.05rem;
}
h6 {
font-size: 1.5rem;
line-height: 1.6;
letter-spacing: 0;
}
/* Larger than phablet */
@media (min-width: 550px) {
h1 {
font-size: 5.0rem;
}
h2 {
font-size: 4.2rem;
}
h3 {
font-size: 3.6rem;
}
h4 {
font-size: 3.0rem;
}
h5 {
font-size: 2.4rem;
}
h6 {
font-size: 1.5rem;
}
}
p {
margin-top: 0;
}
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
color: #1EAEDB;
}
a:hover {
color: #0FA0CE;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
color: #333;
border-color: #888;
outline: 0;
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
color: #FFF;
background-color: #33C3F0;
border-color: #33C3F0;
}
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
color: #FFF;
background-color: #1EAEDB;
border-color: #1EAEDB;
}
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
height: 38px;
padding: 6px 10px;
/* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid #33C3F0;
outline: 0;
}
label,
legend {
display: block;
margin-bottom: .5rem;
font-weight: 600;
}
fieldset {
padding: 0;
border-width: 0;
}
input[type="checkbox"],
input[type="radio"] {
display: inline;
}
label > .label-body {
display: inline-block;
margin-left: .5rem;
font-weight: normal;
}
/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
list-style: circle inside;
}
ol {
list-style: decimal inside;
}
ol,
ul {
padding-left: 0;
margin-top: 0;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%;
}
/*li {
margin-bottom: 1rem; }*/
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px;
}
pre > code {
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #E1E1E1;
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
margin-bottom: 1rem;
}
input,
textarea,
select,
fieldset {
margin-bottom: 1.5rem;
}
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
margin-bottom: 2.5rem;
}
/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
width: 100%;
box-sizing: border-box;
}
.u-max-full-width {
max-width: 100%;
box-sizing: border-box;
}
.u-pull-right {
float: right;
}
.u-pull-left {
float: left;
}
/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
margin-top: 3rem;
margin-bottom: 3.5rem;
border-width: 0;
border-top: 1px solid #E1E1E1;
}
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
content: "";
display: table;
clear: both;
}
/* Navigation Bar
-------------------------------------------------- */
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
/* Float the list items side by side */
ul.topnav li {
float: left;
}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.topnav li a:hover {
background-color: #111;
}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {
display: none;
}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width: 680px) {
ul.topnav li:not(:first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width: 680px) {
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Larger than mobile */
@media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}
/* Larger than tablet */
@media (min-width: 750px) {}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than Desktop HD */
@media (min-width: 1200px) {} .full-width-container {
width:100%;
max-width:100%;
clear:both;
margin:0 auto;
}
/* CSS Document */
.cBox {
border-right:2px #DADADA solid;
}
.cBoxCenter {
text-align:center;
border-right:2px #DADADA solid;
padding:1%;
}
.cBoxMain {
border-top:2px #DADADA solid;
}
.cBoxEnd {
text-align: center;
}
button {
color: white;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff6e00+0,cc0600+100 */
background: #ff6e00;
/* Old browsers */
background: -moz-linear-gradient(top, #ff6e00 0%, #cc0600 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff6e00 0%, #cc0600 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff6e00 0%, #cc0600 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff6e00', endColorstr='#cc0600', GradientType=0);
/* IE6-9 */
border: 0;
}
.content {
background-image: url(../img/hbg.png);
}
.subcontent {
background-image: url(../img/hbg.png);
}
.columns img {
max-width: 100%;
}
.content .columns {
padding: 2%;
}
.columns {} .row {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
-webkit-box-flex: 0;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.fillimage {
background-image: url(../img/ldn.jpg);
background-position: center;
background-size: cover;
}
@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,700,700italic);
/* CSS Document */
html,
body {
background-image: url(../img/bg.png);
font-family: 'Open Sans', sans-serif;
height: 100%;
}
.head {
background-image: url(../img/hbg.png);
}
.head img {
max-width: 100%;
}
.logo {
padding: 2rem;
}
.logo img {
display: block;
margin: auto;
display: block;
margin: auto;
float: left;
max-height: 100%;
}
.headerimage {} .headerimage img {
display: block;
margin: auto;
float: left;
max-height: 100%;
}
/* ----- Contract Form ---- */
#form {
min-width: 300px;
max-width: 600px;
margin: auto;
font-family: sans-serif;
}
#form h2 {
color: #27748A;
font-size: 35px;
margin: 0;
}
#form p {
font-size: 20px;
color: #222222;
}
#form div {
margin-top: 10px;
}
#form input,
textarea,
button {
width: 50%;
padding: 3px 5px;
}
#form label {
font-weight: bold;
font-size: 20px;
color: #184552;
}
#form button {} #form button:hover {
background-color: #CBEAF2;
}
.required {
color: #dd6666;
}
#footer {
background-image: url(../img/bg2.png);
display: block;
color: white;
}
#footer .columns {
padding: 2%;
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Central Computers</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/ccframe.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/content.css">
</head>
<body>
<!-- Primary Page Layout -->
<div class="container">
<!-- Header -->
<div class="row">
<div class="columns head">
<div class="four columns logo">
<img src="img/logo.png" alt="Logo">
</div>
<div class="eight columns headerimage">
<img src="img/london.png" alt="London">
</div>
</div>
</div>
<!-- Header -->
<!-- Nav Bar -->
<div class="row">
<div class="twelve columns">
<ul class="topnav">
<li><a href="#home">Home</a></li>
<li><a href="#news">Buyers</a></li>
<li><a href="#contact">Sellers</a></li>
<li><a href="#about">Student Property</a></li>
<li><a href="#about">Hotels</a></li>
<li><a href="#about">News</a></li>
<li><a href="#about">Contact</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
</div>
</div>
<!-- Nav Bar -->
<!-- Content -->
<div class="row subcontent ">
<div class="four columns cBoxCenter">
<h3>BUYERS</h3>
<p>
If you are a Buyer, looking for Off-Market Properties in prime central locations, then please get in contact with …
</p>
<button>Learn More</button>
</div>
<div class="four columns cBoxCenter ">
<h3>SELLERS</h3>
<p>
If you have properties you wish to sell privately through our off-market collection, we can promote them for you …
</p>
<button>Learn More</button>
</div>
<div class="four columns cBoxEnd fillimage">
</div>
</div>
<div class="row content">
<div class="eight columns cBoxMain cBox">
<h2>Off-Market Properties UK</h2>
<p>If you are looking to buy or sell off-market properties, then you certainly have come to the right place. Off-Market Properties UK has over 30 years of experience in the global property business and we have many clients with an appetite for off-market properties to whom we already offer an expanding portfolio of outstanding development opportunities. Many of the off-market properties we listed this year sold within one month.</p>
<p>Our service is completely bespoke and our task is to connect buyers to sellers with maximum discretion, confidentiality and with minimum fuss. Even though Off-Market Properties UK’s core market is central London, including: Belgravia, Knightsbridge, Kensington, Chelsea, Notting Hill, Covent Garden, Earls Court, we also have properties and development opportunities in other parts of the UK. Basically, wherever the market is most dynamic. If you own a property in an area where we do not yet cover, still try us.</p>
<p>Why go off market? We understand that many property owners prefer to sell their properties privately and not publicly. Confidentiality is usually the reason, perhaps for family reasons or because the owner has a high profile. An advantage to owners is that interest in off market properties tend often to come from serious investors able to exchange quickly.</p>
</div>
<div class="four columns cBoxMain">
<h3>Contact Us</h3>
<form id="form" action="/process.php" method="post">
<p>Use the form below to get in touch, or give us a call on xxx-xxx-xxx
<!--fields-->
</form>
<div>
<label for='name'>Name<span class='required'>(required)</span></label>
<input type='text' name='name' placeholder='your name here' required />
</div>
<div>
<label for='tel'>Tel</label>
<input type='tel' name='tel' placeholder='your telephone here' />
</div>
<div>
<label for='email'>Email <span class='required'>(required)</span></label>
<input type='email' name='email' placeholder='you@yourdomain.com' required />
</div>
<div>
<label for='message'>Message <span class='required'>(required)</span></label>
<textarea name='message' required></textarea>
</div>
<div>
<button type='submit'>Send Message</button>
</div>
</div>
</div>
<!-- Content -->
</div>
<!-- Container -->
<!-- Footer -->
<div class="full full-width-container" id="footer">
<div class="container">
<div class="row">
<div class="four columns">
<h4>Contact Us</h4>
<p>Please get in contact with us to learn more about our Off-Market Properties:</p>
<p>Tel: +44 208 920 9414<br>
Mob: +44 7463 424 888<br>
Email: <a href="mailto:om@offmarketpropertiesuk.com">om@offmarketpropertiesuk.com</a></p>
<p><img src="img/logo.png" width="300" height="85"></p>
</div>
<div class="four columns">
<h4>Off Market Properties UK</h4>
<p>If you are looking to buy or sell an off-market properties, then you certainly have come to the right place. </p>
<p>Our service is completely bespoke and our task is to connect buyers to sellers with maximum discretion, confidentiality and with minimum fuss. Even though Off Market Properties UK’s core market is central London, including: Belgravia, Knightsbridge, Kensington, Chelsea, Notting Hill, Covent Garden, Earls Court, we also have properties in other parts of the UK.</p>
</div>
<div class="four columns" style="overflow:hidden;">
<h3>Contact Us</h3>
<form id="form" action="/process.php" method="post">
<p>Use the form below to get in touch, or give us a call on xxx-xxx-xxx
<!--fields-->
</form>
<div>
<label for='name'>Name<span class='required'>(required)</span></label>
<input type='text' name='name' placeholder='your name here' required />
</div>
<div>
<label for='tel'>Tel</label>
<input type='tel' name='tel' placeholder='your telephone here' />
</div>
<div>
<label for='email'>Email <span class='required'>(required)</span></label>
<input type='email' name='email' placeholder='you@yourdomain.com' required />
</div>
<div>
<button type='submit'>Send Message</button>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
<script src="js/menu.js"></script>
</html>
2 个答案:
答案 0 :(得分：0)
您应该从此处删除容器宽度
@media (min-width: 400px) {.container {
// width: 85%; //commented width
padding: 0;
}
}
答案 1 :(得分：0)
经过更多的思考和敲击头部和桌子之后我才意识到我的计算结果只有一小部分。
原来我忘记了最后的十进制数字位置。
.one.column,
.one.columns { width: 8.33333333333%; }
.two.columns { width: 16.6666666667%; }
.three.columns { width: 25.0%; }
.four.columns { width: 33.3333333333%; }
.five.columns { width: 41.6666666667%; }
.six.columns { width: 50.0%; }
.seven.columns { width: 58.3333333333%; }
.eight.columns { width: 66.6666666667%; }
.nine.columns { width: 75.0%; }
.ten.columns { width: 83.3333333333%; }
.eleven.columns { width: 91.6666666667%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？