Html 调整浏览器大小时，元素始终会移动_Html_Css

Html 调整浏览器大小时，元素始终会移动

html css

Html 调整浏览器大小时，元素始终会移动,html,css,Html,Css,例如：div上的所有元素总是首先在滑块的顶部移动。我不知道在调整浏览器大小时如何将它们粘贴在同一位置 <h1 style="font-family:Raleway;font-weight:bold;font-size:26px;text-transform:uppercase;color:#000000;color:rgb(0, 0, 0);margin-top:40px;text-align:center">ABOUT US</h1> <div class="un

例如：div上的所有元素总是首先在滑块的顶部移动。我不知道在调整浏览器大小时如何将它们粘贴在同一位置

<h1 style="font-family:Raleway;font-weight:bold;font-size:26px;text-transform:uppercase;color:#000000;color:rgb(0, 0, 0);margin-top:40px;text-align:center">ABOUT US</h1>
<div class="underline1" style="margin-left:auto;margin-right:auto;top:620px;width:105px;height:2px;background-color:#FF8A00"></div>
<div class="underline2" style="margin-left:auto;margin-right:auto;top:629px;width:51px;height:2px;background-color:#FF8A00;margin-top:5px"></div>

<div class="first">
    <img style="margin-top:60px;width:47%;height:47%;margin-left:100px;"src="img/image-section1.png"/>
    <h1 style="margin-top:-485px;margin-left:780px;font-family:Raleway;font-weight:bold;font-size:18px;text-transform:uppercase;color:#444444">Welcome to Ultramax</h1>
    <p style="margin-left:780px;width: 472px;height: 354px;font-family:Raleway;font-size:15px;color:#636363;line-height:35px">Lorem Ipsum
    Is Simply Dummy Text The Printing And Typesetting 
    Industry. Lorem Ipsum Has Been The Industry's Of The Printing And Typesetting Industry. 
    Lorem Ipsum Has Been The Industry's The Printing And Typesetting Industry. 
    Lorem Ipsum Has Been The Industry's Standard Dummy Text Ever Since The 1500s, 
    When An Unknown Printer Took A Galley Of Type And Scrambled It To Make A Type Specimen Book.
    It Has Survived Not Only Five Centuries, But Also The Leap Into Electronic Typesetting, 
    Remaining EssentiallyIt Has Survived Not Only Five CenturiesLorem 
    Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry.</p>
    <button id="button-section1">LEARN MORE</button>
</div>

关于我们
欢迎来到Ultramax
Lorem Ipsum
简单的虚拟文本就是打印和排版吗
工业。Lorem Ipsum一直是印刷和排版行业的佼佼者。
Lorem Ipsum一直是印刷和排版行业的佼佼者。
自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，
当一个不知名的印刷商拿着一个铅字厨房，把它拼凑成一本铅字样本书时。
它不仅存活了五个世纪，而且还跨越了电子排版，
基本上，它不仅存活了五个世纪
Ipsum只是印刷和排版行业的虚拟文本
了解更多

我在这里用到的一些想法

关于我们的

和行区域如下


现在我使用了宽度为100%的父div
然后我对pic和body使用了2child div
s
请注意，我使用的宽度=50%，因此将父div分为两列
float
中的值显示了子div
s的对齐位置
这就是你可以使用的
<html>
<body>
<h1 style="font-family:Raleway;font-weight:bold;font-size:26px;text-transform:uppercase;color:#000000;color:rgb(0, 0, 0);text-align:center;margin-top:50px">ABOUT US</h1>
<div class="underline1" style="margin-left:auto;margin-right:auto;top:620px;width:105px;height:2px;background-color:#FF8A00"></div>
<div class="underline2" style="margin-left:auto;margin-right:auto;top:629px;width:51px;height:2px;background-color:#FF8A00;margin-top:5px"></div>
<br><br><br>
<div style ="width: 100%; margin:0 auto;">

    <div style="width: 50%; height: 50%; float:left">
        <h1 style="text-align:right;margin-right:50px"><img style=" width: 80%;height: auto%;" src = "test.jpg" </h1>
    </div>
    <div style="width: 50%; height: 50%; float:right; ">
            <h1 style="text-align:left;margin-left:50px;font-family:Raleway;font-weight:bold;font-size:18px;text-transform:uppercase;color:#111111">Welcome to Ultramax</h1>
            <p style="text-align:left;margin-left:50px;font-family:Raleway;font-size:15px;color:#636363;line-height:35px">Lorem Ipsum
            Is Simply Dummy Text The Printing And Typesetting 
            Industry. Lorem Ipsum Has Been The Industry's Of The Printing And Typesetting Industry. 
            Lorem Ipsum Has Been The Industry's The Printing And Typesetting Industry. 
            Lorem Ipsum Has Been The Industry's Standard Dummy Text Ever Since The 1500s, 
            When An Unknown Printer Took A Galley Of Type And Scrambled It To Make A Type Specimen Book.
            It Has Survived Not Only Five Centuries, But Also The Leap Into Electronic Typesetting, 
            Remaining EssentiallyIt Has Survived Not Only Five CenturiesLorem 
            Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry.</p>
            <button style="text-align:left;margin-left:50px;"id="button-section1">LEARN MORE</button>
    </div>

</div>
</body>
</html>


关于我们




欢迎来到Ultramax
Lorem Ipsum
简单的虚拟文本就是打印和排版吗
工业。Lorem Ipsum一直是印刷和排版行业的佼佼者。
Lorem Ipsum一直是印刷和排版行业的佼佼者。
自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，
当一个不知名的印刷商拿着一个铅字厨房，把它拼凑成一本铅字样本书时。
它不仅存活了五个世纪，而且还跨越了电子排版，
基本上，它不仅存活了五个世纪
Ipsum只是印刷和排版行业的虚拟文本
了解更多



这是一张截图。。

在调整大小时，它就像

你可以从你提供的网站下载图像。
你能详细说明你的问题是什么吗？我的滑块按钮上有代码，我将其粘贴到帖子中，每次调整浏览器大小时，图像都会调整大小，这很好，但所有的问题都会出现在滑块上，我想减少和滑块，并保持在同一位置。复制粘贴代码时，我看到的标题在顶部，文本在右侧。然后按钮在左边，文字在中间。好吧，我不希望它与图片底部对齐，我希望它在图片旁边。就在最后一次，请澄清我。中间上方有一个图像。然后中间有h1，最后一行左边有文字，右边有按钮？@SamMohamed啊！这是一个蹩脚的把戏，使图像出现在中心。实际上，我在使图像显示在中间时遇到了很多问题，所以当浏览器最终意识到它是图像时，就用它来愚弄浏览器，使其将其视为标题糟糕的工作，抱歉另一个问题你为什么不关闭你在这里使用的div@SamMohamed那是个打字错误。。更正：）你应该解释你在做什么，而不仅仅是给出解决方案。仅仅为人们编写代码就无法达到stackoverflow的目的。