Question

例如：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>

Answer 1

我在这里使用的一些想法。

About Us和行区域如下
现在我使用了parent div width 100%
然后我使用2 child div s作为照片和身体
请注意我使用的宽度= 50％，因此将父div除以2列
float中的值显示了child div对齐的位置

这是你可以使用的..

<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>

这是一个截图..

在调整大小时就像

您可以从您提供的网站下载图片。

元素总是在调整浏览器大小时移动

1 个答案: