Question

我用html和css排成一些图片。出于某种原因，我在容器div之后得到了大量额外的空白空间。我真的很感激一些帮助！

此项目目前正在现场托管，可在此处找到：My Project

body {
  margin: 0;
}
#mixtape {
  -ms-zoom: 0.25;
  -moz-transform: scale(0.25);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.25);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.25);
  -webkit-transform-origin: center top;
  display: inline-block;
  height: 0;
}
#case {
  position: relative;
  top: -15px;
  left: 15px;
  z-index: 1;
  display: inline-block;
  margin: 0;
}
#shadow {
  position: relative;
  top: -836px;
  display: inline-block;
  margin: 0;
}
#disk1 {
  position: relative;
  top: -1548px;
  left: 150px;
  z-index: 0;
  animation: disk 8s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  display: inline-block;
  margin: 0;
}
#disk2 {
  position: relative;
  top: -1548px;
  left: 255px;
  z-index: 0;
  animation: disk 8s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  display: inline-block;
  margin: 0;
}
@keyframes disk {
  from {
    -ms-transform: rotate(0deg);
    /* IE 9 */
    -webkit-transform: rotate(0deg);
    /* Safari */
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    /* IE 9 */
    -webkit-transform: rotate(360deg);
    /* Safari */
    transform: rotate(360deg);
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Mixtape</title>
  <link rel="stylesheet" type="text/css" href="main.css">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
  <!--ubuntu font-->
  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>

<body>
  <div id="mixtape">
    <img src="case.svg" id="case">
    <img src="shadow.svg" id="shadow">
    <img src="disk.svg" id="disk1">
    <img src="disk.svg" id="disk2">
  </div>
</body>

</html>

Answer 1

我想这是因为SVG的奇怪渲染，如果它们放在标签中。我建议尝试使用固定大小的内联SVG。现在它的行为就像一个img标签，但保留了空间和全尺寸svg。

Answer 2

当我将代码粘贴到jsfiddle中时，你的代码似乎工作得很好，所以也许还有别的东西会产生影响。

尽管如此，我做了一些可能有所帮助的改动：

1）定位#mixtape亲戚，然后定位其子句绝对（绝对是其父亲）。

2）我添加了.disk类来干你的代码，因为有2个磁盘，只有top和left属性不同。

body {
  margin: 0;
}
#mixtape {
  -ms-zoom: 0.25;
  -moz-transform: scale(0.25);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.25);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.25);
  -webkit-transform-origin: center top;
  height: 0;
  display: block;
  position: relative;
  margin: 10px auto 0px;
}
#case {
  position: absolute;
  top: 0px;
  left: 15px;
  z-index: 1;
  display: inline-block;
  margin: 0;
}
#shadow {
  position: absolute;
  top: 15px;
  display: inline-block;
  margin: 0;
}
.disk {
  position: absolute;
  z-index: 0;
  animation: disk 8s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  display: inline-block;
  margin: 0;
}
#disk1 {
  top: 146px;
  left: 151px;
}
#disk2 {
  top: 146px;
  left: 734px;
}
@keyframes disk {
  from {
    -ms-transform: rotate(0deg);
    /* IE 9 */
    -webkit-transform: rotate(0deg);
    /* Safari */
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    /* IE 9 */
    -webkit-transform: rotate(360deg);
    /* Safari */
    transform: rotate(360deg);
  }
}

<body>
  <div id="mixtape">
    <img src="http://mkitgreat.com/mixtape/case.svg" id="case">
    <img src="http://mkitgreat.com/mixtape/shadow.svg" id="shadow">
    <img src="http://mkitgreat.com/mixtape/disk.svg" class="disk" id="disk1">
    <img src="http://mkitgreat.com/mixtape/disk.svg" class="disk" id="disk2">
  </div>
</body>

Answer 3

而不是在内部元素上设置相对位置。尝试相对于外部div设置位置，然后将所有其他元素设置为position：absolute。

位置相对通常用于包含其中定位的元素。

当元素通常绝对定位时。它位于整个页面内。

如果该元素位于相对元素内。它将位于该元素内。

这将解决你的太空问题。

为什么它创造了这么多空间。与上面的答案相同。 SVG以dom在特定高度检测到它的方式呈现。因此它为这个高度“腾出空间”。

如果你在这里查看你的页面： http://mkitgreat.com/mixtape/case.svg

看看它有多大。与您在页面中呈现的内容相比。改变图像大小会很聪明。

Answer 4

好的，感谢所有发布回答的人！

通过将包含元素的位置设置为父级的绝对位置而不是相对位置，我可以消除额外的空白区域：

#case{
    position:absolute;
    ...

我还可以通过将变换原点设置为居中来使整个mixtape居中：

#mixtape{   
    -webkit-transform: scale(0.25);
    -webkit-transform-origin: center top;
    ...

我有来自无处的额外空间

4 个答案: