如何将元素“粘合”在屏幕顶部

Question

我有一个我不太明白的问题，因为这与我所知道的完全相反。那么，我知道的是（我认为）元素最初放在左上角，然后尝试向内向内覆盖空间，然后向下覆盖。

但我的问题是，不知何故，我的html-divs粘在底部，表现得好像他们的定位从底部开始，然后向右移动。任何人都可以向我解释这是怎么回事，css属性可以改变它吗？

图像显示三列矩形+一个徽标，每列代表一个更大的div（具有css内联块属性，以使它们从左到右显示）：

我也可以给你css + html，虽然搜索它可能会太多了（我更想给你一个通用答案，所以你不必看通过我的所有代码）：

button
{
    width: 205px;
    height: 30px;
    font-size: 14px;
    font-weight: 500;
}

.bestillingstekst
{
    font-weight: 500;

}

.question
{
    font-weight: 700;
}

.psmall
{
    display: inline;
    font-style: italic;
    font-size: 13px;
    font-weight: 600;
}

.psmall2
{
    display: block;
    font-style: italic;
    font-size: 13px;
    font-weight: 600;
    margin-top: 3px;
}

.input_box
{
    width: 150px;
    display: inline-block;
    float:right;
}

.rectangledesign
{
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 18px;
    border-color: #ff3333;
    border-style: solid;
    border-width: 6px;
    padding: 5px;
}

  <form method='POST' id='form1' runat='server' autocomplete='off'>

        <div style="display: block; width: 100vw; font-family: 'Malgun Gothic'; font-weight: 400;">
        <div id="screenie">
        <div style="margin-top: 10px;">
            
            <div id="Left-div" style="display: inline-block;">

            <div id="Tjenesteinformasjon" style='width: 300px;' class="rectangledesign">
                <span style='font-size: 26px;'>Hva gjør vi?</span><br />
                    
                <p>Vi tilbyr flyttehjelp, flyttevask, varetaxi/budbil, transport og utleie av biltransporthenger!<br /><br />
                Vennligst benytt bestillingsskjema til høyre for å få et tilbud raskt og enkelt (bestilling er ikke bindende)!<br /><br />
                Ønsker du å kontakte oss manuelt, enten for bestilling, informasjon eller kundeservice, kan du også bruke kontakt- og bedriftsinformasjonen nedenfor.</p>
            </div>

            <div id="Priser" style="width: 300px;" class="rectangledesign">
                <span style='font-size: 26px;'>Prisinformasjon:</span><br />
                <p>
                    Priser avtales som en fast sum på forhånd! Du skal aldri betale mer enn denne prisen!<br />
                    <span style="color: red; font-weight: 600; font-size: 19px;">Det er viktig for oss at du er fornøyd med prisen din! Derfor kan du gi oss et tilbud i bestillingskjema til høyre! Ikke glem å fortell oss hva du ønsker!</span>
                </p>
            </div>

            <div id="Partner" style="width: 300px;" class="rectangledesign">
                <span style='font-size: 26px;'>Bli partner!</span><br />
                <p>
                    Trenger du ofte oppdrag? Eller trenger du noen til å kjøre varer og gjenstander fast? Da ønsker vi å bli partner med deg!<br /><br />
                    Kontakt Hjelpsomme Folk for mer informasjon om hvordan å sette opp partnerskap med vår bedrift!
                </p>
            </div>

             <div id="Kontaktinformasjon" style='width: 300px;' class="rectangledesign">
                <span style='font-size: 26px;'>Hvordan kontakte oss?</span><br />
                    
                <p>epost: post@hjelpsommefolk.no<br />tlf: 92 53 48 35<br/>Organisasjonsnr.: 916 043 112<br/>
                Postadresse: Nøsteveien 60, 3413 Lier<br/>Kontaktperson: Mantas Tamosiunas</p>
            </div>

            </div>

            <div id="Center-div" style="display: inline-block;">
                <div style="width: 550px;" class="rectangledesign">

                <div id="skjematype_a" style="display: block; width: 265px; height: 75px; margin-left: 120px; font-size: 11.75px; text-align: center; border-width: 3px; border-style: outset; border-color: #00e6ab;">
                    <img id="bil" src="/images/bil.jpg" onclick="changeImage()" style="width: 135px; height: 75px; float: left; padding-right: 2px;" />
                    <div id="skjematype_b">Klikk på bildet for å bytte bestillingskjema til <b>biltransporthenger.</b></div>
                </div>

                <script>
                    function changeImage()
                    {
                        var bestillingstekst = document.getElementById('bestillingstekst')
                        var bestillingstekst2 = document.getElementById('bestillingstekst2')
                        var block = document.getElementById('skjematype_a')
                        var s_text = document.getElementById('skjematype_b')
                        var image = document.getElementById('bil');
                        if (image.src.match("bil"))
                            {
                            image.src = "/images/henger.jpg"
                            s_text.innerHTML = "Klikk på bildet for å bytte bestillingskjema til <b>transport</b> og <b>flyttetjenester.</b>"
                            bestillingstekst.hidden = 'hidden'
                            bestillingstekst2.hidden = ''
                            }
                        else
                            {
                            image.src = "/images/bil.jpg";
                            s_text.innerHTML = "Klikk på bildet for å bytte bestillingskjema til <b>biltransporthenger.</b>"
                            bestillingstekst.hidden = ''
                            bestillingstekst2.hidden = 'hidden'
                            }
                    }
                </script>
                
                <div id='bestillingstekst' class='bestillingstekst'>
                    <p>
                        <span style='font-size: 26px;'>Bli kontaktet med tilbud på sms!</span><br />
                        <span style='font-style: italic;'>(tilbudet kommer normalt dagen etter)</span>
                    </p>

                    <p class='question'>Hvilke tjenester ønsker du?</p>

                        <label>Flyttehjelp<input id='fhjelp' type='checkbox' name='tjenester' runat='server'/></label>
                        <label>Flyttevask<input id='fvask' type='checkbox' name='tjenester' runat='server'/></label></>
                        <label>Transport<input id='transport' type='checkbox' name='tjenester' runat='server'/></label></>
                    

                    <p class='question'>Hvordan ønsker du å betale?</p>

                        <label>Kontant<input id='kontant' type='radio' name='betaling' runat='server'/></label></>
                        <label>Faktura<input id='faktura' type='radio' name='betaling' runat='server'/></label></>
                    
                    <p class="question">Hva synes du er en god pris for jobben?</p>
                        <div style='width: 100%; display: inline-block; text-align: left; line-height: 22px;'>
                            <label>Pris i kroner:<input class="input_box" id='pris1' type='tel' maxlength='8' runat='server'/></label>
                        </div>

                    <p class='question'>Er du privatperson eller bedrift?</p>

                        <label>Privat<input id='privat' type='radio' name='kundetype' runat='server'/></label></>
                        <label>Bedrift<input id='bedrift' type='radio' name='kundetype' runat='server'/></label></>
                    

                    <p class='question'>Hvordan kontakter vi deg?</p>

                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                        <label>Fullt personnavn<input class="input_box" id='personnavn' type='text' runat='server'/></label>
                        <br />

                        <label>Bedriftsnavn<span class='psmall'> (kun for bedrifter)</span><input class="input_box" id='bedriftsnavn' type='text' runat='server'/></label>
                        <br />

                        <label>Mobilnr.<input class="input_box" id='tlf' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Alternativt telefonnr.<input class="input_box" id='alt_tlf' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Epost<input class="input_box" id='epost' type='email' runat='server'/></label>
                        <br />
                    
                    </div>

                    <p class='question'>Hva er beste dato og tidspunkt for tjenesten(e)?</p>
                    <p class='psmall2'>(bare endr tidspunkt for tjenestene du skal ha)</p>
                    
                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 24.5px;'>
                        <label>Flyttehjelp<input class="input_box" id='fhjelp_tid' type='datetime'  value='10:00 01-01-2016' runat='server'/></label>
                        <br />

                        <label>Utflyttingsvask<input class="input_box" id='fvask_tid' type='datetime'  value='10:00 01-01-2016' runat='server'/></label>
                        <br />

                        <label>Tilflyttingsvask<input class="input_box" id='fvask_tid2' type='datetime'  value='10:00 01-01-2016' runat='server'/></label>
                        <br />

                        <label>Transport<input class="input_box" id='transport_tid' type='datetime'  value='10:00 01-01-2016' runat='server'/></label> 
                        <br />

                    </div>

                    <p class='question'>Hvor skal tjenesten(e) starte?</p>

                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                        <label>Adresse<input class="input_box" id='adresse1' type='text' runat='server'/></label>
                        <br />

                        <label>Poststed<input class="input_box" id='poststed1' type='text' runat='server'/></label>
                        <br />

                        <label>Postnr.<input class="input_box" id='postnr1' type='text' maxlength='4' runat='server'/></label>
                        <br />

                        <label>Etasje<input class="input_box" id='etasje1' type='tel' maxlength='2' runat='server'/></label>
                        <br />

                        <label>Ca. kvadratmeter <span class='psmall'>(trengs bare ved utflyttingsvask)</span><input class="input_box" id='kvadratmeter1' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Bygningstype<input class="input_box" id='bygningstype1' type='text' runat='server'/></label>
                        <br />

                        <label>Heis?</label>
                        <div style='display: inline-block; float:right;'>
                            <label>Ja<input id='heisja1' type='radio' name='heis1' runat='server'/></label>
                            <label>Nei<input id='heisnei1' type='radio' name='heis1' class='radioleft' runat='server'/></label>
                        </div>
                        <br />

                    </div>
                        
                    <p class='question'>Hvor skal tjenesten(e) avslutte(s)?</p>
                    <p class='psmall2'>(ikke fyll inn viss kun utflyttingsvask)</p>

                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                        <label>Adresse<input class="input_box" id='adresse2' type='text' runat='server'/></label>
                        <br />

                        <label>Poststed<input class="input_box" id='poststed2' type='text' runat='server'/></label>
                        <br />

                        <label>Postnr.<input class="input_box" id='postnr2' type='text' maxlength='4' runat='server'/></label>
                        <br />

                        <label>Etasje<input class="input_box" id='etasje2' type='tel' maxlength='2' runat='server'/></label>
                        <br />

                        <label>Ca. kvadratmeter <span class='psmall'>(trengs bare ved tilflyttingsvask)</span><input class="input_box" id='kvadratmeter2' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Bygningstype<input class="input_box" id='bygningstype2' type='text' runat='server'/></label>
                        <br />

                        <label>Heis?</label>
                        <div style='display: inline-block; float:right;'>
                            <label>Ja<input id='heisja2' type='radio' name='heis2' runat='server'/></label>
                            <label>Nei<input id='heisnei2' type='radio' name='heis2' class='radioleft' runat='server'/></label>
                        </div>
                        <br />

                    </div>
                        
                    <p class='question'>Hva ønsker du fraktet (og annet vi bør vite)?</p>
                    <textarea id='textarea1' rows='6' cols='32' spellcheck='False' name='S1' runat='server'>Du behøver ikke skrive noe her viss du ikke trenger det...</textarea><br />
                    <button style='margin-top: 2px;' id='Button2' form='form1' type='submit' onserverclick='sendemail' runat='server'>Kontakt meg med et tilbud!</button>
                </div>

                <div hidden="hidden" id='bestillingstekst2' class='bestillingstekst'>
                
                     <p>
                        <span style='font-size: 26px;'>Bli kontaktet med tilbud på sms!</span><br />
                        <span style='font-style: italic;'>(tilbudet kommer normalt dagen etter)</span>
                    </p>

                    <p class='question'>Hvordan ønsker du å betale?</p>

                        <label>Kontant<input id='leie_kontant' type='radio' name='betaling' runat='server'/></label></>
                        <label>Faktura<input id='leie_faktura' type='radio' name='betaling' runat='server'/></label></>

                    <p class="question">Hva synes du er en god pris for leie?</p>
                    <p class='psmall2'>(fastpriser inntil 1 døgn: 300kr/400kr/500kr under 4/8/24 timer)</p>
                        <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                            <label>Pris i kroner:<input class="input_box" id='pris2' type='tel' maxlength='8' runat='server'/></label>
                        </div>
                
                    <p class='question'>Er du privatperson eller bedrift?</p>

                        <label>Privat<input id='leie_privat' type='radio' name='kundetype' runat='server'/></label></>
                        <label>Bedrift<input id='leie_bedrift' type='radio' name='kundetype' runat='server'/></label></>
                    

                    <p class='question'>Hvordan kontakter vi deg?</p>

                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                        <label>Fullt personnavn<input class="input_box" id='leie_personnavn' type='text' runat='server'/></label>
                        <br />

                        <label>Bedriftsnavn<span class='psmall'> (kun for bedrifter)</span><input class="input_box" id='leie_bedriftsnavn' type='text' runat='server'/></label>
                        <br />

                        <label>Mobilnr.<input class="input_box" id='leie_tlf' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Alternativt telefonnr.<input class="input_box" id='leie_alt_tlf' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Epost<input class="input_box" id='leie_epost' type='email' runat='server'/></label>
                        <br />
                    
                    </div>

                    <p class='question'>Når ønsker du å leie?</p>
                    
                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 24.5px;'>
                        <label>Leiestart<input class="input_box" id='leiestart' type='datetime-local'  value='2020-01-01T10:00:00' runat='server'/></label>
                        <br />

                        <label>Leieslutt<input class="input_box" id='leieslutt' type='datetime-local'  value='2020-01-01T10:00:00' runat='server'/></label>
                        <br />

                    </div>

                    <p class='question'>Hva er adressen din?</p>

                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                        <label>Adresse<input class="input_box" id='leie_adresse' type='text' runat='server'/></label>
                        <br />

                        <label>Poststed<input class="input_box" id='leie_poststed' type='text' runat='server'/></label>
                        <br />

                        <label>Postnr.<input class="input_box" id='leie_postnr' type='text' maxlength='4' runat='server'/></label>
                        <br />

                    </div>

                    <p class='question'>Noe mer vi bør vite?</p>
                    <textarea id='textarea2' rows='6' cols='32' spellcheck='False' name='S1' runat='server'>Du behøver ikke skrive noe her viss du ikke trenger det...</textarea><br />
                    <button style='margin-top: 2px;' id='Button1' form='form1' type='submit' onserverclick='sendemail2' runat='server'>Kontakt meg med et tilbud!</button>
                </div>

                </div>
            </div>

            <div id="Right-div" style="display: inline-block;">
            
            <img style="width: 315px; height: 245px;" src='/images/logo.jpg'/ alt='logo'/>

            <div id="Finn" style='width: 300px; text-align: center; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;'>
                <p style="font-size: 16px; font-style: italic;">Se våre finn.no referanser i linken under! <a href="http://www.finn.no/smajobber/profiler/510702027/">http://www.finn.no/smajobber...</a></p>
                <img  style="" src='/images/finn1.PNG'/>
                <img  style="" src='/images/finn2.PNG'/>
                <img  style="" src='/images/finn3.PNG'/>
            </div>

            <div id="Trygghet" style="width: 300px;" class="rectangledesign">
                <span style='font-size: 26px;'>Trygghet!</span><br />
                    
                <p>Når man har noe så billige som oss, kan det være lett å tro at det er <i>for</i> billig.<br />
                    For oss er dette <i>ikke</i> sant! Vi tror at <b>trygghet</b>, <b>god kundeservice</b> og <b>gode priser</b> hører sammen!<br /><br />

                    Hos Hjelpsomme Folk skal du alltid føle deg trygg på at vi viser <b>respekt</b>, <b>nøyaktighet</b> og <b>forsiktighet</b> når vi behandler dine eiendeler!<br /><br />

                    Vi vil alltid ta ekstra godt vare på gjenstandene dine når disse skal fraktes, og har som regel å pakke dem inn i bobleplast for å fjerne muligheten for transportskader!<br /><br />
                    Hva tror du? Skal kvalitetsarbeide følge sammen med lave priser?</p>
            </div>

            <div id="Facebook" style="width: 300px;" class="rectangledesign">
                <h4 style="font-style: italic;">
                    Liker du oss? Vis det her! <3
                </h4>

                <div class="fb-like" data-href="http://hjelpsommefolk.no" data-width="100" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
                <br />
                <div class="fb-comments" data-href="http://hjelpsommefolk.no" data-width="275" data-numposts="6"></div>
            </div>

            </div>

            </div>
            </div>
            </div>

        <script type="text/javascript">
                var rightdiv = parseInt(document.getElementById('Right-div').offsetWidth);
                var centerdiv = parseInt(document.getElementById('Center-div').offsetWidth);
                var leftdiv = parseInt(document.getElementById('Left-div').offsetWidth);

                var combined_rect_width = rightdiv + centerdiv + leftdiv + 40;

                var int_screeniemargin = (window.innerWidth * 0.5) - (combined_rect_width * 0.5);

                var string_screeniemargin = int_screeniemargin + "px";
                
                document.getElementById('screenie').style.marginLeft = string_screeniemargin;
            </script>
    </form>

Answer 1

将vertical-align：top添加到Left-div和Right-div。