Question

我刚刚完成了非营利组织假日活动的目标网页。我有一点点收尾的麻烦。

目前，页面右侧有额外的空格，触发浏览器中的水平滚动条。我不知道为什么，我希望页面宽度与元素一起调整到屏幕尺寸。

另外，我在设计人物的四个图像的样式时遇到了麻烦。我希望图像显示在同一行上，当屏幕最小为1200像素时，每个图像为300 x 300像素，两者之间没有间距。否则，我希望它们以屏幕为中心堆叠在一起（用于移动）。它们正在堆叠，但显示在左侧。

我不是最精明的程序员，因为我不是网络开发人员。我实际上是非营利组织的社交媒体专家。感谢您的帮助。

可在此处访问页面：

https://secure3.convio.net/little/site/SPageNavigator/Holiday%20Page%20Wrapper/HolidayCampaign2015.html

Answer 1

尝试使用以下css将所有内容放入 Wrapper div中：

.container {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

您也可以尝试使用：

overflow-x: hidden;

Answer 2

对于空白（和正在显示的滚动条），为.row { margin: 0 !important; }添加CSS。你现在有-10px +10px ......我从来不明白为什么那是自助标准。

要使图像居中，您需要将margin: 0 auto;添加到图像的父div.box。

Answer 3

将它应用于CSS也许styles.css它看起来是具有最高优先级的样式表。

html,
body {
  box-sizing: border-box;
  width: 100vw;
  height: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}


*,
*:before,
*:after {
  box-sizing: inherit;
}

/* place this div right aftter thr <body> and before the </body> */

#jar {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 auto;
  overflow-y: auto;
}

<强>更新

我忘了为您的图片发布解决方案。此代码适用于包裹图像的元素。大多数人使用＆lt; div>，但我使用<figure>，因为它在语义上是合适的。

在像.frame这样的容器上使用max-content使其像收缩包装一样。您需要使用供应商前缀这是一个痛苦，因为您可以看到您必须每次写出3次高度和宽度。

您可能必须使用负边距并将填充和边框重置为0才能消除图像之间的空间。

＆＃13;

.frame {
  width: -moz-max-content;
  width: -webkit-max-content;
  width: max-content;
  height: -moz-max-content;
  height: -webkit-max-content;
  height: max-content;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border: 0;
}
.frame img {
  padding: 0;
  margin: -2px;
  border: 0;
  display: inline-block;
  width: 24%;
  height: auto;
}

＆＃13;

<figure class="frame">
  <img src="http://placehold.it/150x85/000/Fff.png&text=FIRST" />
  <img src="http://placehold.it/150x85/048/Fee.png&text=SECOND" />
  <img src="http://placehold.it/150x85/fa8/375.png&text=THIRD" />
  <img src="http://placehold.it/150x85/9a7/a10.png&text=FOURTH" />
</figure>

＆＃13;

Answer 4

你能做的最好的事情就是将标签内的所有内容包装到一个新的div＆amp;设置溢出：隐藏;

<body>
  <div class="wrapper">

    Every other HTML will go here...

  </div>
</body>

CSS

.wrapper {
  overflow: hidden;
}

另请注意：在body标签内调用scripts / css不是最佳做法。那些应该在标签内部调用

Answer 5

问题在于所有这些边缘捏造：

mvn dependency:tree

在我关闭所有这些之后，事情似乎正确排列。

如何摆脱页面右侧的空白区域？

5 个答案: