基于流体/百分比的布局上的图像未对齐

发布于 2025-01-08 14:19:04 字数 366 浏览 0 评论 0原文

我有这个代码： http://jsfiddle.net/VV9qJ/ 但由于某种原因我似乎无法修复由图像引起的小像素错误。基本上，您会注意到一些图像周围有一个或两个像素的白色间隙，而另一些则没有，特别是当您调整浏览器窗口大小时。每个浏览器呈现的白色间隙也略有不同。

我的布局不能有任何间隙，所有内容必须相互紧密结合，包括浏览器窗口。

是否有一种万无一失的方法可以确保图像在不同浏览器中始终保持紧密接触？也许是 jQuery？我已经进行了大量的谷歌搜索，但没有发现任何相关内容。

仍然没有找到解决这个问题的方法。我很难相信没有解决方案，任何人都可以提供帮助吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦幻的味道 2025-01-15 14:19:04

除非我不明白出了什么问题，否则我似乎无法重现白色间隙的问题，但听起来可能是边距或填充问题。

div.smallLink {
    display: inline-block;
    font-size: 100%;
    margin: 0;
    padding: 0;
    width: 50%;
}

您可能还需要将 .smallLink 内的 img 标签的边距和填充设置为 0。

Unless I'm not understanding what's wrong, I can't seem to reproduce the problem with the white gaps, but it sounds like it could be a margin or padding problem.

div.smallLink {
    display: inline-block;
    font-size: 100%;
    margin: 0;
    padding: 0;
    width: 50%;
}

You might also have to set margin and padding on img tags within .smallLink to 0.

回复收藏 0 原文

诗笺 2025-01-15 14:19:04

在 groupoflink div

letter-spacing 下添加以下代码：-4px;

http://jsfiddle.net/VV9qJ/11/

回复收藏 0 原文

帅气尐潴 2025-01-15 14:19:04

您的问题是 content 类的 div 上的 width:100% ..

而带有 banner 类的 div 也设置为 < code>100% 宽度占据了完整的 100% 空间，但是当您将 100% 细分为 50% + 50% 时，会发生以下情况：划分100% 宽度比如说 - 500 到 250 + 250 对于你的子划分。但是只有当其父级（因为它是动态的）所采用的宽度是偶数时，划分才能正确发生。即，2( n) ..

否则，50%的划分不会正确发生，比如501是可用空间，这意味着100%宽度的div将占据完整的空间，即501 -- 但是宽度为 50% 的子 div 将得到 250px 和 250px 留下您注意到的 1px 间隙

！ background-color 这样你就可以忽略爬升的 1px 空白！！

这不是克服这个问题的最佳方法——应该有一种我现在无法想到的CSS方式..所以，这是一个JS解决方案..

function load(){
var largelink = document.getElementById("largelink");
largelink.nextSibling.style.width = largelink.parentNode.offsetWidth-largelink.offsetWidth + "px";
}
window.onload = load;
window.resize = load;

即，Parent——如果501和第一个孩子有50%将为 250，因此第二个子级将为 501-250 + "px"

仅编辑了 1 组 HTML（您应该对其余部分执行相同操作）- 更改为获取父级的 id（ 15 其 501）和大林（如果是 501 - 这将是 250）

<div id="largeLink" class="largeLink">

还没有测试过它..希望它有效..

Your problem is the width:100% on the div with the class content ..

while the div bearing the class banner is also set to 100% width occupies the complete 100% of the space,but when your subdividing the 100% into 50% + 50% what's happening is that its dividing the 100% width say - 500 into 250 + 250 for you sub divisions.But the division happens properly only when the width taken by its parent( since its dynamic) is an EVEN NUMBER.. i.e, 2(n) ..

else,the 50% division doesnt happen properly,say 501 was the space available which means the div's with 100% width will take up the complete space which is 501 -- but the child div's with 50% width will get 250px and 250px leaving behind that `1px gap that your noticing!!..

To remove the white space give a background-color so that you can overlook the 1px white space that creeps up!!

This isnt the best method to overcome this -- there should be a css way which i'm unable to think of right now.. so,here's a JS solution..

function load(){
var largelink = document.getElementById("largelink");
largelink.nextSibling.style.width = largelink.parentNode.offsetWidth-largelink.offsetWidth + "px";
}
window.onload = load;
window.resize = load;

i.e,Parent -- if 501 and the 1st child with 50% will be 250 hence the second child will be 501-250 + "px"

Edited only 1 set of your HTML ( you should do the same for the rest ) -- changed to get the id of the parent( 15 its 501 ) and the largelin ( if its 501 - this would be 250 )