<分区>
javascript - 如何将 "glue"元素顶到屏幕顶部
标签 javascript html css
我有一个我不太明白的问题，因为它与我所知道的完全相反。所以，我所知道的(我认为)元素最初放置在左上角，然后尝试向右、然后向下覆盖内联空间。
但我的问题是我的 html-div 以某种方式粘在底部，表现得好像它们的定位从底部开始，然后向右移动。任何人都可以向我解释这是怎么回事，哪些 css 属性可以改变它？
图像显示三列矩形 + 一个 Logo ，每列代表一个较大的 div(使用 css inline-block 属性以使它们从左到右显示):
我也可以给你 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>最佳答案
将 vertical-align: top 添加到 Left-div 和 Right-div。
关于javascript - 如何将 "glue"元素顶到屏幕顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35167109/