问题标签 [full-width]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
71 浏览

svg - 将 svg 设置为全宽

我在使用 SVG 创建布局时遇到问题。我用 illustrator 创建了曲线

我将此代码粘贴到某些浏览器中的 div 上,它适用于其他浏览器,它会创建一个空白空间或边框。谁能帮助我如何使这个 SVG 适合全宽?

更新

我将 SVG 代码粘贴在页脚上。然后我添加了两个 CSS 规则。

在较新的浏览器上,我得到了这个,

(图片) https://i.ibb.co/FY00dYH/Screenshot-20190416-100631-Gallery.jpg

而在旧浏览器上,它会创建一个空白区域。

(图片) https://i.ibb.co/qCh8pQD/Screenshot-20190416-100637-Gallery.jpg

0 投票
0 回答
108 浏览

wordpress - WordPress手机人像全角问题

对于我的 WordPress 网站,我使用“Themify Shoppe”主题。在“编辑页面”->“主题化自定义面板”中,我选择“全宽”作为“内容宽度”。它可以在桌面上正常工作,即使是移动肖像尺寸。在实际的手机上,风景也可以。

但是,移动人像存在问题。

我什至不知道到底是什么问题,所以请看下面的截图。当我导航到该页面时,“CONTACTS”实际上被视为“CONTAC”,直到我缩小。

我非常希望在不更改 css 的情况下解决问题,尽管如果 css 是唯一的选择,我也可以这样做。 在此处输入图像描述

0 投票
1 回答
63 浏览

wordpress - 移动设备上的全宽响应图像和桌面上的覆盖半页

我正在 Wordpress 上建立一个网站。我在 Wordpress 中为我的桌面页面制作了 2 列布局,其中图像填充其中一列,文本填充第二列。(https://drive.google.com/open?id=1TKhwA_vQnukeh-q1KL5sqXtHYtXVRjDA)这就是现在的样子(https://drive.google.com/open?id=1Rr-iDFylP0Goev2Vb6g9fsgd-lSkJV6x)。但我想在移动设备上全角显示图像(类似于https://drive.google.com/open?id=1CvWrqGogynSTN2qn3myKYUT0ZkzZP8o1 )。我怎么能那样做?

0 投票
1 回答
271 浏览

html - 缩小时如何使标题占据整个宽度?

当我缩小标题不占用页面的全宽。我有两张图片,第一张是缩小时的样子,第二张是它没有占据整个宽度的地方。

图片1 :
图片1

图二:
图二

width:100%在标题中尝试过,但它不起作用。

0 投票
1 回答
895 浏览

html - 如何使两列 div 跨越页面的整个宽度

我想让下面的 div 跨越页面的整个宽度,但它目前只跨越我页面的中间部分(与其他内容一样)。

我试图在我的 css 中包含 width:100%,我也尝试删除容器,但如果我这样做,我无法并排获得两列。

0 投票
4 回答
77 浏览

html - 全宽引导 html/css 表不起作用

https://jsfiddle.net/4b36yozr/ 如何删除容器右侧的白色竖条,尽管它设置为全宽。我需要有 4 个块覆盖整个屏幕,而右边没有那个空白。

0 投票
1 回答
42 浏览

css - 具有最少 CSS 的全宽图像

我正在(曾经)寻找一种方法,让我的图像尽管有身体填充,但仍然是全宽的。而且,我希望我的图像也不会太高。

使事情变得更加困难,(a)所有图像都存在于标签<p>我不能(轻松)为它们分配类等。那是因为页面是从 Markdown 转换生成的,我想避免应用大量的正则表达式(尽管如果需要我愿意)。

要求基本上是在正文内填充文本(但不是通过p边距,所以我不必处理非段落元素)。而且,我希望最大高度是当前宽度的某个百分比。最后,除了尽量避免触碰HTML之外,如果可以的话,我也不想添加任何js。

0 投票
1 回答
764 浏览

html - 我可以让 div 在 Bootstrap 4 中覆盖容器吗?

我正在这个页面上工作,我有一个包含 2 段的容器。在这两个段落之间,我希望(仅在小屏幕上)在具有全屏宽度的 div 中显示引号,但是由于容器的原因,我似乎无法获得全宽 小屏幕视图

我知道可以制作多个容器,但这不是我想要的,因为它必须在中大屏幕(2 列)上看起来像THIS 。如您所见,报价也仅出现在小屏幕上。有任何解决这个问题的方法吗?这是我的代码

HTML:

CSS:

0 投票
2 回答
325 浏览

css - Safari 中的 CSS 全宽背景图像(负边距)

我有一个无法修复的 CSS 问题。

我的 wordpress 页面中有一个全宽部分。它使用负边距来创建全宽(在 chrome、safari、edge 和 firefox 中运行良好)。

我通过 :before 和 :after 添加了背景图像以创建一些波浪:

它在 firefox、chrome 和 edge 中运行良好。但是 safari 不想全宽查看背景图像,而且在大屏幕上看起来真的很难看。我尝试了不同的设置,但无法正常工作。你还有什么想法吗!?我不想消除这种影响。:(

您可以在此处查看实时示例:https ://lettering.tools/ 全宽部分直接位于第一个文本块之后。

谢谢!

编辑:我使用了答案的组合来解决问题。但是如果我不想要 SVG 的响应高度怎么办?

还出现了另一个问题:Edge 中有一条不需要的 1px 线。我尝试了负底部值并转换:翻译。但它没有用。最后我意识到溢出:隐藏在容器上会导致 1px 线 - 但为什么呢?!

在此处输入图像描述

0 投票
1 回答
52 浏览

javascript - 将图像从列中分离出来,让它跨越两列

我有一个图像,我需要从列中分离出来,让它跨越两列(模板使用的是 Bootstrap 4)。

它应该看起来像这样

不幸的是,我将无法修改 html,那么这是否仅适用于 CSS/JS?

这是我的代码: