页面上画廊的宽度如何设置为100%？

Question

我无法在我的网站上将画廊宽度设置为100%

这是我的网站，在这里你可以看到源代码 http://pepi.g6.cz

谢谢您的帮助。

- Mr 537h

---

你是什么意思？ - SamHoque

除了下面的答案之外，为了使视频与其下方的内容具有相同的边距，请将其最大宽度设置为100％，以便它不会超出屏幕。 - Sensoray

欢迎来到Stack Overflow！请将代码添加到您的问题中。否则，它对未来的访问者几乎没有帮助。请查看此链接：https://stackoverflow.com/help/mcve。 - galdin

希望你已经解决了问题，欢迎来到 Stack Overflow。如果这个答案或其他任何一个答案解决了你的问题，请将其标记为已接受 - 这将有助于其他人在页面上看到好的答案！ - jminguely

Answer 1

如果您将.responsive类的宽度属性设置为33.33%（而不是33％），则您提到的右侧空白区域应该会减少。

您将把右边距最小化为总宽度的0.01％，而不是1％。

还有一种选择是使用css calc运算符：width: calc(100% / 3);

- jminguely

---

谢谢-33.33%。我已经尝试过了，但是画廊对此没有响应（第三张图片只是在前两张图片上方），calc(100%/3)可以工作(!)，但仍然不同于视频横幅:/它让我感到困扰，感谢顶部横幅，当你滑动时，你可以看到它（代码已更改为calc(100%/3)）。 - Mr 537h

由于横幅中的元素目前比您的视口要大得多，因此它目前在右侧溢出。正如佩奇在她的回复中提到的那样，您应该向视频元素添加“max-width: 100%”以使其适合窗口宽度。 - jminguely

Answer 2

请尝试这个CSS。

body {
    background-color: white;
    margin: 0;
    overflow-x: hidden;
}

.responsive {
    float: left;
    height: auto;
    width: 33.33%;
}

这将同时移除您的水平滚动条。

- akshay saxena

---

谢谢，这个可以用！但我想让视频横幅向上滚动 :D - Mr 537h

您想让横幅部分水平滚动还是垂直滚动？ - akshay saxena

"视频"横幅 - 与顶部菜单相同 - Mr 537h

@jminguely使用width: calc(100% / 3);的答案好得多。 - Kevin Wenger

Answer 3

听起来你有几个问题。

首先：你不需要使用Arial字体，因为它是系统字体！

第二：你需要将视频标签的宽度设置为max-width: 100%。

第三：导航栏不需要margin-top: -75px。你应该修复其他边距！

第四：使用外部CSS文件。

第五：使用浏览器开发工具帮助你找出网站的问题，通常是Ctrl+Shift+I（WIN）Cmd+Opt+I（OSX）（Firefox Chrome, Safari）

- Horacsio

---

感谢帮助，我是编程新手，这是我第一个大项目。1. 好的 2. 好的 3. 我 improvisation 4. 最终我会 - 但通过这种方式，你可以看到它。5. Opt 在哪里？: P - Mr 537h

jminguely: Alt键就是Option键 ;) Mr 537h: Opt/Alt键的解决方案适用于Mac用户 ;) - Horacsio