CSS列底部的额外空间
我有一个里面有图像的容器。我使用CSS列和媒体查询来确定布局。我在底部放了一个段落标签,注意到底部有额外的空间。这是我在这把小提琴里说的。奇怪的事情发生在黄色和橙色的断点上。有人知道这是什么原因吗 这是我的密码CSS列底部的额外空间,css,multiple-columns,column-count,Css,Multiple Columns,Column Count,我有一个里面有图像的容器。我使用CSS列和媒体查询来确定布局。我在底部放了一个段落标签,注意到底部有额外的空间。这是我在这把小提琴里说的。奇怪的事情发生在黄色和橙色的断点上。有人知道这是什么原因吗 这是我的密码 -- HTML -- <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"
-- HTML --
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width" />
<title>Portraits</title>
<meta name="description" content="">
<link href='http://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
</head>
<body class="photography">
<nav class="site_navigation cf">
<ul id="nav_drop" class="nav_links cf">
<li class="nav_home"><a href="#">Home</a></li>
<li class="nav_blog"><a href="#">Blog</a></li>
<li class="nav_photography"><a href="#">Photography</a></li>
<li class="nav_projects"><a href="#">Projects</a></li>
<li class="nav_contact"><a href="#">Contact</a></li>
</ul>
</nav>
<div class="main photography_wrapper">
<h1>Portraits</h2>
<div class="gallery_wrapper">
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
</div>
<p>Random collection of portraits.</p>
<div class="more_galleries">
<h2>More Galleries</h2>
<div class="more_gallery_photos">
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a>
<a href="#"><img src="http://placedog.com/400/400" alt=""></a> </div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://dev.danielcgold.com/js/selectnav.min.js"></script>
<script src="http://dev.danielcgold.com/js/functions.js"></script>
</body>
</html>
-- CSS --
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.cf:before,.cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
img {
max-width: 100%;
}
body {
font-family: Arial, sans-serif;
font-size: 100%;
background: #fffff6;
margin: 0;
padding: 2em;
padding-top: 6.375em;
color: #252525;
}
h1,h2,h3,h4,h5,h6 {
font-family: serif;
font-weight: normal;
margin-bottom: 1em;
}
h1 {
font-size: 3em;
}
p {
line-height: 1.5em;
word-wrap: break-word;
}
strong {
font-family: 'pt_sans_captionbold', sans-serif;
font-weight: normal;
}
a {
color: #ff830a;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.selectnav {
display: none;
}
.site_navigation {
font-family: 'Raleway', sans-serif;
font-weight: 200;
background: #fff;
padding: 1em;
border-bottom: 0.063em solid rgba(0,0,0,0.15);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4.375em;
-moz-box-shadow: rgba(0,0,0,0.15) 0 0 0.4em;
-webkit-box-shadow: rgba(0,0,0,0.15) 0 0 0.4em;
-o-box-shadow: rgba(0,0,0,0.15) 0 0 0.4em;
box-shadow: rgba(0,0,0,0.15) 0 0 0.4em;
}
.site_navigation a {
text-decoration: none;
color: #444;
display: block;
margin: .5em;
padding-bottom: .25em;
}
.nav_links {
list-style: none;
margin: 0;
padding: 0;
float: right;
}
.nav_links li {
float: left;
}
.gallery_wrapper {
-moz-column-count: 5;
-webkit-column-count: 5;
-o-column-count: 5;
column-count: 5;
line-height: 0;
}
.more_galleries {
margin-top: 6em;
}
.more_gallery_photos {
-moz-column-count: 5;
-webkit-column-count: 5;
-o-column-count: 5;
column-count: 5;
}
.more_gallery_photos a {
display: block;
margin-bottom: 1em;
}
.gallery_wrapper a {
display: block;
margin-bottom: 1em;
}
.gallery_wrapper img {
display: block;
height: auto;
}
@media screen and (max-width: 60em) {
.gallery_wrapper {
-moz-column-count: 4;
-webkit-column-count: 4;
-o-column-count: 4;
column-count: 4;
}
.more_gallery_photos {
-moz-column-count: 4;
-webkit-column-count: 4;
-o-column-count: 4;
column-count: 4;
}
.gallery_wrapper a {
margin-bottom: 1em;
}
.more_gallery_photos a {
display: block;
margin-bottom: 1em;
}
}
@media screen and (max-width: 48em) {
.nav_links {
float: left;
}
.gallery_wrapper {
-moz-column-count: 3;
-webkit-column-count: 3;
-o-column-count: 3;
column-count: 3;
}
.more_gallery_photos {
-moz-column-count: 3;
-webkit-column-count: 3;
-o-column-count: 3;
column-count: 3;
}
.gallery_wrapper a {
margin-bottom: 1em;
}
.more_gallery_photos a {
display: block;
margin-bottom: 1em;
}
}
@media screen and (max-width: 30em) {
.site_navigation {
height: 3.5em;
}
.nav_links {
display: none;
}
.selectnav {
display: block;
margin-left: 1.5em;
}
.gallery_wrapper {
-moz-column-count: 1;
-webkit-column-count: 1;
-o-column-count: 1;
column-count: 1;
}
.more_gallery_photos {
-moz-column-count: 2;
-webkit-column-count: 2;
-o-column-count: 2;
column-count: 2;
}
.more_gallery_photos a {
display: block;
margin-bottom: 1em;
}
}
--HTML--
肖像
肖像
随机收集的肖像
更多画廊
--CSS--
* {
-moz框大小:边框框;
-webkit框大小:边框框;
-ms框尺寸:边框框;
框大小:边框框;
}
.cf:之前,.cf:之后{
内容:“;
显示:表格;
}
.cf:之后{
明确:两者皆有;
}
.cf{
*缩放:1;
}
img{
最大宽度:100%;
}
身体{
字体系列:Arial,无衬线;
字体大小:100%;
背景#fffff 6;
保证金:0;
填料:2米;
垫面:6.375em;
颜色:252525;
}
h1、h2、h3、h4、h5、h6{
字体系列:衬线;
字体大小:正常;
边缘底部:1米;
}
h1{
字号:3em;
}
p{
线高:1.5em;
单词包装:打断单词;
}
强壮的{
字体系列:“pt_sans_captionbold”,无衬线;
字体大小:正常;
}
a{
颜色:#ff830a;
文字装饰:无;
}
a:悬停{
文字装饰:下划线;
}
.选择导航{
显示:无;
}
.网站导航{
字体系列:“Raleway”,无衬线;
字号:200;
背景:#fff;
填充:1em;
边框底部:0.063em实心rgba(0,0,0,0.15);
位置:固定;
排名:0;
左:0;
宽度:100%;
高度:4.375em;
-moz盒阴影:rgba(0,0,0,0.15)0.4em;
-webkit盒阴影:rgba(0,0,0,0.15)0.4em;
-o盒阴影:rgba(0,0,0,0.15)0.4em;
盒影:rgba(0,0,0,0.15)0.4em;
}
.site_导航a{
文字装饰:无;
颜色:#444;
显示:块;
边缘:.5em;
垫底:25em;
}
.导航链接{
列表样式:无;
保证金:0;
填充:0;
浮动:对;
}
.nav_links li{
浮动:左;
}
.gallery_包装纸{
-moz列数:5;
-webkit列数:5;
-o-列计数:5;
列数:5;
线高:0;
}
.更多画廊{
边缘顶端:6em;
}
。更多照片{
-moz列数:5;
-webkit列数:5;
-o-列计数:5;
列数:5;
}
.更多图片库图片a{
显示:块;
边缘底部:1米;
}
.画廊(a){
显示:块;
边缘底部:1米;
}
.gallery_包装器img{
显示:块;
高度:自动;
}
@媒体屏幕和屏幕(最大宽度:60em){
.gallery_包装纸{
-moz列数:4;
-webkit列数:4;
-o-列计数:4;
列数:4;
}
。更多照片{
-moz列数:4;
-webkit列数:4;
-o-列计数:4;
列数:4;
}
.画廊(a){
边缘底部:1米;
}
.更多图片库图片a{
显示:块;
边缘底部:1米;
}
}
@媒体屏幕和屏幕(最大宽度:48em){
.导航链接{
浮动:左;
}
.gallery_包装纸{
-moz列数:3;
-webkit列数:3;
-o列计数:3;
列数:3;
}
。更多照片{
-moz列数:3;
-webkit列数:3;
-o列计数:3;
列数:3;
}
.画廊(a){
边缘底部:1米;
}
.更多图片库图片a{
显示:块;
边缘底部:1米;
}
}
@媒体屏幕和屏幕(最大宽度:30em){
.网站导航{
高度:3.5公分;
}
.导航链接{
显示:无;
}
.选择导航{
显示:块;
左边距:1.5em;
}
.gallery_包装纸{
-moz列数:1;
-webkit列计数:1;
-o列计数:1;
列数:1;
}
。更多照片{
-moz列数:2;
-webkit列数:2;
-o列计数:2;
列数:2;
}
.更多图片库图片a{
显示:块;
边缘底部:1米;
}
}
编辑:第一把小提琴已经解决了。我更新了一个JS文件,将我的真实代码剥离并重新创建了这个问题。我使用SASS,因此CSS是输出。向图像添加
显示:block
将解决此问题
img { display: block; }
更新:
这里有一个更新的Fiddle:在图像中添加
显示:block
将解决此问题
img { display: block; }
更新:
这里有一个更新的Fiddle:这是因为图像
标记呈现为内联块。
Fiddle:这是因为图像
标记呈现为内联块
。
小提琴手:这对我有帮助
将HI添加到列计数块:
:after {
content: '';
display: block;
width: 100%;
height: 20px;
margin-top: -20px;
}
这对我有帮助
将HI添加到列计数块:
:after {
content: '';
display: block;
width: 100%;
height: 20px;
margin-top: -20px;
}
嗯,我确实看到它在小提琴上起作用,但在我的真实示例页面上它什么都不起作用,这是不幸的