[英]Breakpoint leaves blank space in content
在1100px的断点处，我告诉CSS删除保存图像的div。 但是，其余内容不会移动，并且有很大的空白区域（好像div仍然存在）。 我只想让内容全部转移并填充页面。 此错误打开发生在此单个页面上，并且特定于此断点。
/*minimised browser winddow */ @media(max-width: 1100px) { header #branding, header nav, header nav li, #newsletter form, aside#sidebar { float: none; text-align: center; width: 100%; } aside { display: none; } #newsletter h1 { display: none; } } /* 768 tablet */ @media(max-width: 768px) { header #branding, header nav, header nav li, #newsletter h1, #newsletter form, #boxes .box, article#main-col, aside#sidebar { float: none; width: 100%; } header { padding-bottom: 20px; } #imagery { display: none; } #showcase h1 { font-size: 275%; } #showcase p { font-size: 100%; } #newsletter button, .quote button { display: block; width: 100%; } #newsletter form input[type="email"], .quote input, .quote textarea { width: 100%; margin-bottom: 5px; } .col-25, .col-75 { width: 100%; margin-top: 0; } /* nav */ ul.topnav li { display: none; } ul.topnav li.icon { display: inline-block; } ul.topnav.responsive { position: relative; } ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; /* 'un' float the list items so they return to displaying vertically */ display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } /* 400 pixels mobile phone */ @media screen and (max-width: 480px) { header #branding, header nav, header nav li { text-align: center; font-size: 100% } header ul { padding: 10px; font-size: 100%; }
<script src="https://use.fontawesome.com/3a2264e344.js"></script> <script src="html9shiv.js"></script> <link rel="shortcut icon" type="image/png" href="wrench.png" /> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <meta name="desciption" content="Darran Brady Plumbing"> <meta name="keywords" content="Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham "> <meta name="author" content="DB, Darran, Brady, Darran Brady"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </head> <body> <header> <div class="container"> <div id="branding"> <h1><span class="highlight">DB</span> Plumbing</h1> </div> <nav> <ul class="topnav" id="myTopnav"> <li class="active"><a href="home9.html">Home</a></li> <li><a href="about9.html">About</a></li> <li><a href="services9.html">Services</a></li> <li><a href="coverage9.html">Coverage</a></li> <li><a href="contact9.html">Contact</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:140%;" onclick="myFunction()">☰</a> </li> </ul> </nav> </div> </header> <div class="container"> <div class="dark"> <div class="callus"><a href="tel:+07756848657"><i class="fa fa-phone fa-2x" ></i></a></div> <h2>Our Story</h2> </div> </div> <section id="main"> <div class="container"> <article id="main-col"> <p> Our customer's individual requirements are important to us at DB Plumbing. We always provide quality service and products and combined with honesty has made us the first choice of many homes in the Horsham area.</p> <div class="dark"> <h3>What We Offer</h3> <ul> <li>Plumbing and Heating Services</li> <li>Gas Safe Registered: 202542</li> <li>VAT Registered</li> <li>25 years of expertise</li> <li>Plumbing and Heating Services</li> <li>Heating Engineer Qualified</li> <li>VAT Registered</li> <li>100% Satisfaction Garauntee</li> </ul> </article> <aside id="sidebar"> <div class="dark"> <h3>Satisfaction Garauntee</h3> <p>Reputation matters. 98% of our customer would reccomend us to a friend.</p> <a href="http://www.checkatrade.com/DBPlumbing/Reviews.aspx"><img class="catsmall" src="cat.png" alt="checkatradelogo"></a> </div> </aside> </div> </section> <footer> <div> <p>Darren Brady Plumbing Copyright © 2017</p> <p>Registered in England No. 4364232</p> </div> </footer>
我认为在@media CSS中将您的容器类设置为width：100％将解决您的问题。
有两种方法可以使div居中（在您的情况下为“我们提供的内容”块）
中心position:relative
#main-col{
position:relative;
left:15%; //This can differ, and you can keep whatever you see it's best
}
增加该特定块的min-width
#main-col{
min-width: 100%; //Remember, you need to force the width,
//so width:100% won't work here. Hence min-width
}
body { font: 100%/1.5 Arial, Helvetica, sans-serif; padding: 0; margin: 0; background-color: white; } /* Style the list 'container' */ ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } /* Float the list items left - this is the 'magic' that turns a vertical list into a horizontal row */ ul.topnav li { float: left; } /* style the links */ ul.topnav li a { display: inline-block; color: white; text-align: center; text-decoration: none; transition: 0.3s; font-size: 100%; } /* hover */ ul.topnav li a:hover { color: gold; } /* Hide the icon initially */ ul.topnav li.icon { display: none; } /* Global */ .container { width: 70%; margin: auto; overflow: hidden; /* Allows the burger nav and branding to sit on the same line */ } a { text-decoration: none; text-shadow: 50px; color: black; } ul { margin: 0; padding: 0; } .subscribe { height: 38px; background: gold; border: 0; padding-left: 20px; padding-right: 20px; color: black; } .dark { padding: 25px; background: #35424a; color: white; margin-top: 10px; margin-bottom: 10px; } .maps { position: relative; padding-bottom: 75%; // This is the aspect ratio height: 0; overflow: hidden; } .maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } /* Header **/ header { background: #35424a; color: white; padding-top: 30px; min-height: 70px; border-bottom: gold 5px solid; } header a { color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 100%; } header li { float: left; display: inline; padding: 0 20px 0 20px; } header #branding { float: left; } header #branding h1 { margin: 0; } header nav { float: right; margin-top: 10px; } header .highlight { color: gold; } header a:hover { color: gold; } h3 .bronze { color: #cc6633; } h3 .silver { color: silver; } h3 .gold { color: gold; } img.catsmall { width: 90%; height: auto; } /* Showcase */ #showcase { min-height: 350px; } #showcase h1 { margin-top: 50px; font-size: 500%; margin-bottom: 10px; text-align: center; } #showcase h2 { margin-bottom: 10px; text-align: center; } #showcase p { font-size: 120%; } /* Newsletter */ #newsletter { padding: 15px; color: #ffffff; background: #35424a } #newsletter h1 { float: left; } #newsletter form { float: right; margin-top: 15px; } #newsletter input[type="email"] { padding: 4px; height: 26px; width: 250px; } /* Sidebar */ aside#sidebar { float: right; width: 25%; margin-top: 10px; } section#contactus .quote input, section#contactus .quote textarea { width: 30%; padding: 5px; } /* Main-col */ article#main-col { float: left; width: 70%; } /* Imagery */ #imagery { margin-top: 2%; margin-bottom: 2%; } #imagery .box { float: right; text-align: center; width: 30%; padding: 10px; } #imagery .box i { font-size: 800%; } /* Create four equal columns that floats next to each other */ .column { float: left; width: 20%; padding: 10px; } .column img { margin-top: 12px; width: 100%; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } .container .visuals { float: right; } .container .callus { float: right } .fa-phone { color: gold; } /* Services */ input[type=text], select, textarea { width: 60%; padding: 12px; border: 1px box-sizing: border-box; resize: vertical; } /* Floating column for labels: 25% width */ .col-25 { float: left; width: 30%; margin-top: 10px; } /* Floating column for inputs: 75% width */ .col-75 { float: left; width: 70%; margin-top: 10px; } footer { padding: 20px; margin-top: 20px; color: black; background-color: gold; text-align: center; } /*minimised browser winddow */ @media(max-width: 1100px) { header #branding, header nav, header nav li, #newsletter form, aside#sidebar { float: none; text-align: center; width: 100%; } aside { display: none; } #newsletter h1 { display: none; } #main-col { min-width: 100%; } } /* 768 tablet */ @media(max-width: 768px) { header #branding, header nav, header nav li, #newsletter h1, #newsletter form, #boxes .box, article#main-col, aside#sidebar { float: none; width: 100%; } header { padding-bottom: 20px; } #imagery { display: none; } #showcase h1 { font-size: 275%; } #showcase p { font-size: 100%; } #newsletter button, .quote button { display: block; width: 100%; } #newsletter form input[type="email"], .quote input, .quote textarea { width: 100%; margin-bottom: 5px; } .col-25, .col-75 { width: 100%; margin-top: 0; } /* nav */ ul.topnav li { display: none; } ul.topnav li.icon { display: inline-block; } ul.topnav.responsive { position: relative; } ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; /* 'un' float the list items so they return to displaying vertically */ display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } /* 400 pixels mobile phone */ @media screen and (max-width: 480px) { header #branding, header nav, header nav li { text-align: center; font-size: 100% } header ul { padding: 10px; font-size: 100%; } /* CSS reset */ { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } HTML5 display-role reset for older browsers article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; background-image: url("bg.jpg"); background-size: cover; background-size: contain; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
<script src="https://use.fontawesome.com/3a2264e344.js"></script> <script src="html9shiv.js"></script> <link rel="shortcut icon" type="image/png" href="wrench.png" /> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <meta name="desciption" content="Darran Brady Plumbing"> <meta name="keywords" content="Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham "> <meta name="author" content="DB, Darran, Brady, Darran Brady"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </head> <body> <header> <div class="container"> <div id="branding"> <h1><span class="highlight">DB</span> Plumbing</h1> </div> <nav> <ul class="topnav" id="myTopnav"> <li class="active"><a href="home9.html">Home</a></li> <li><a href="about9.html">About</a></li> <li><a href="services9.html">Services</a></li> <li><a href="coverage9.html">Coverage</a></li> <li><a href="contact9.html">Contact</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:140%;" onclick="myFunction()">☰</a> </li> </ul> </nav> </div> </header> <div class="container"> <div class="dark"> <div class="callus"><a href="tel:+07756848657"><i class="fa fa-phone fa-2x" ></i></a></div> <h2>Our Story</h2> </div> </div> <section id="main"> <div class="container"> <article id="main-col"> <p> Our customer's individual requirements are important to us at DB Plumbing. We always provide quality service and products and combined with honesty has made us the first choice of many homes in the Horsham area.</p> <div class="dark"> <h3>What We Offer</h3> <ul> <li>Plumbing and Heating Services</li> <li>Gas Safe Registered: 202542</li> <li>VAT Registered</li> <li>25 years of expertise</li> <li>Plumbing and Heating Services</li> <li>Heating Engineer Qualified</li> <li>VAT Registered</li> <li>100% Satisfaction Garauntee</li> </ul> </article> <aside id="sidebar"> <div class="dark"> <h3>Satisfaction Garauntee</h3> <p>Reputation matters. 98% of our customer would reccomend us to a friend.</p> <a href="http://www.checkatrade.com/DBPlumbing/Reviews.aspx"><img class="catsmall" src="https://i.pinimg.com/736x/d5/7a/e1/d57ae1e0abaa478e79388007b6d6dd09--woman-face-woman-style.jpg" alt="checkatradelogo"></a> </div> </aside> </div> </section> <footer> <div> <p>Darren Brady Plumbing Copyright © 2017</p> <p>Registered in England No. 4364232</p> </div> </footer>
html @MEDIA print {}，用于隐藏标记，在打印中留有空白
[英]html @MEDIA print {}, to hide markup leaves blank space in the print
删除后jQuery / AJAX在多列div中留下白色空格
[英]jQuery/AJAX after post deletion leaves white blank space inside Multi-Column div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.