缩放时 Div 标签会移动

发布于 2025-01-12 17:23:29 字数 778 浏览 3 评论 0原文

我对 HTML 还很陌生，我正在尝试使用一些 div 标签在放大或缩小页面时移动。我的 HTML 代码的结构是：

<header>
    
        <div class="header">
            <div class="title">
                <h1>Here goes a title</h1>
            </div>
            <div class="logo">
                <img class="logo" src="my/image/path.png">
            </div>
        </div>

</header>

相应的 CSS 代码：

header{ 
    padding-left: 260px;
    padding-top: 65px;
    padding-right: 0px;
    padding-bottom: 20px;
}

.title{
    float: left;
    width: 50%;
}

img.logo{
    width: 243.77px;
    height: 73.43px;
    padding-top: 3px;
    position: absolute;
}

缩放时我的标题和徽标图像都会移动。

任何帮助将不胜感激。

问候。

原文

I am pretty new at HTML, and I am experimenting with some div tags to move along when zooming in or out the page. The structure of my HTML code is:

<header>
    
        <div class="header">
            <div class="title">
                <h1>Here goes a title</h1>
            </div>
            <div class="logo">
                <img class="logo" src="my/image/path.png">
            </div>
        </div>

</header>

And the corresponding CSS code:

header{ 
    padding-left: 260px;
    padding-top: 65px;
    padding-right: 0px;
    padding-bottom: 20px;
}

.title{
    float: left;
    width: 50%;
}

img.logo{
    width: 243.77px;
    height: 73.43px;
    padding-top: 3px;
    position: absolute;
}

Both my title and the logo image moves when zooming.

Any help would be appreciated.

Regards.

分享到QQ

分享到微博

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

发布评论

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

心安伴我暖 2025-01-19 17:23:29

这是因为您使用 padding-left 来更改整个标题的位置，而且您还使用 px 单位，这使得它的位置在不同的屏幕尺寸下似乎不断变化。

解决方案是改用百分比或使用媒体屏幕查询。

一个题外话的建议，使用 padding 来改变位置并不总是一个好的做法，使用 margin 总是更好。

*这是一个示例使用百分比，您可以根据需要进行更改。

header{ 
    padding-left: calc(20vw);
    padding-top:calc(5vh);
    padding-right: 0;
    padding-bottom: calc(10vh);
}

.title{
    float: left;
    width: 50%;
}

img.logo{
    width: 243.77px;
    height: 73.43px;
    padding-top: 3px;
    position: absolute;
}

<header>
    
        <div class="header">
            <div class="title">
                <h1>Here goes a title</h1>
            </div>
            <div class="logo">
                <img class="logo" src="my/image/path.png">
            </div>
        </div>

</header>

That is because you use the padding-left to change the position of the full header, but also you use the px unit which makes its position seems keep changing in different screen size.

A solution is to use percentage instead or use media screen query.

An off-topic suggestion, it is not always a good practice to use padding to change position, use margin is always better.

*This is an example use percentage you could change based on what you want.

header{ 
    padding-left: calc(20vw);
    padding-top:calc(5vh);
    padding-right: 0;
    padding-bottom: calc(10vh);
}

.title{
    float: left;
    width: 50%;
}

img.logo{
    width: 243.77px;
    height: 73.43px;
    padding-top: 3px;
    position: absolute;
}

<header>
    
        <div class="header">
            <div class="title">
                <h1>Here goes a title</h1>
            </div>
            <div class="logo">
                <img class="logo" src="my/image/path.png">
            </div>
        </div>

</header>

回复收藏 0 原文

~没有更多了~