Div එකක අන්තර්ගතය පහළට පෙළගස්වන්නේ කෙසේද

1182

මට පහත CSS සහ HTML කේතය ඇති බව පවසන්න:

#header {
  height: 150px;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

ස්නිපටය පුළුල් කරන්න

ශීර්ෂක කොටස ස්ථාවර උසකි, නමුත් ශීර්ෂක අන්තර්ගතය වෙනස් විය හැකිය.

ශීර්ෂ පා of යේ සිරස් අතට සිරස් අතට පෙළගැස්වීමට මම කැමතියි, එබැවින් පෙළෙහි අවසාන පේළිය "සිරස්" ශීර්ෂ කොටසේ පහළට ඇදී යයි.

එබැවින් එක් පෙළක් පමණක් තිබේ නම්, එය මෙසේ වනු ඇත:

-----------------------------
| ශීර්ෂ මාතෘකාව
|
|
|
| ශීර්ෂ අන්තර්ගතය (එහි ප්‍රති ing ලයක් ලෙස එක් පේළියක්)
-----------------------------

පේළි තුනක් තිබේ නම්:

-----------------------------
| ශීර්ෂ මාතෘකාව
|
| ශීර්ෂ අන්තර්ගතය (එය එසේ ය
| එය පරිපූර්ණ ලෙස බොහෝ දේ
| පේළි තුනකට වඩා විහිදේ)
-----------------------------

CSS හි මෙය කළ හැක්කේ කෙසේද?

html css vertical-alignment

— ක්‍රිස්ටෝෆ්
source

1334

සාපේක්ෂ + නිරපේක්ෂ ස්ථානගත කිරීම ඔබේ හොඳම ඔට්ටුවයි:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>

ස්නිපටය පුළුල් කරන්න

නමුත් ඔබට ඒ සමඟ ගැටළු ඇති විය හැකිය. මම එය උත්සාහ කළ විට අන්තර්ගතයට පහළින් පහළට වැටෙන මෙනු සමඟ ගැටලු ඇති විය. එය ලස්සන නැත.

අවංකවම, සිරස් කේන්ද්‍රගත කිරීමේ ගැටළු සඳහා සහ, අයිතම සමඟ ඇති ඕනෑම සිරස් පෙළගැස්වීමේ ගැටළු ස්ථාවර උස නොවේ, වගු භාවිතා කිරීම පහසුය.

උදාහරණය: වගු භාවිතා නොකර ඔබට මෙම HTML පිරිසැලසුම කළ හැකිද?

— cletus
source

4

මෙහි විමසීමට පෙර මම ඇත්ත වශයෙන්ම එම විසඳුම සොයා ගත්තෙමි, නමුත් කෙසේ හෝ තනතුර එකතු කිරීමට අමතක විය: සාපේක්ෂ; ශීර්ෂ පා div ය වෙත සහ අන්තර්ගතය පිටුවේ පතුලේ ගොඩ බැස්සේය. ස්තූතියි

— ක්‍රිස්ටෝෆ්

15

ඔබේ ඩ්‍රොප් ඩවුන් ස්ථානය z- දර්ශක දේපල සමඟ කළමනාකරණය කර එය ඉදිරියට ගෙන ඒමට ඔබට හැකිය. ඉසෙඩ් දර්ශක දේපල සාපේක්ෂව හෝ නිරපේක්ෂව ස්ථානගත කර ඇති මූලද්‍රව්‍ය සමඟ ක්‍රියා කරන බව මතක තබා ගන්න. පිරිසැලසුම් ප්‍රති .ල ලබා ගැනීම සඳහා වගුවක් භාවිතා කිරීම සඳහා අර්ථාන්විතව කථා කිරීම නිවැරදි නොවේ.

— ඇලෙජැන්ඩ්‍රෝ ගාර්ෂියා ඉග්ලේසියස්

1

මුල් ගැටලුවේ විස්තර කර ඇති පරිදි පෙළ අන්තර්ගතය සම්බන්ධයෙන්, # ශීර්ෂ අන්තර්ගතය සැබවින්ම pඅංගයක් විය යුතුය , නැතහොත් අවම වශයෙන්span

— ජොෂ් බර්ගස්

2

වගු නොවන දත්ත සඳහා වගු භාවිතා නොකරන්න! ඒ වෙනුවට, CSS දර්ශන ගුණාංග භාවිතා කරන්න display: table-cell, හෝ table-row, හෝ table. පිරිසිදු පිරිසැලසුම සඳහා ඔබට නැවත කිසි විටෙක වගු භාවිතා කිරීමට අවශ්‍ය නොවේ.

— ජෙරමි මොරිට්ස්

1

ශීර්ෂක පිහිටීම සාපේක්ෂ වන්නේ කුමක් ද?

— stack1

160

CSS ස්ථානගත කිරීම භාවිතා කරන්න:

/* Creates a new stacking context on the header */
#header {
  position: relative;
}

/* Positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

ලෙස ක්ලීටස් සඳහන් , ඔබ මෙම කාර්යය සිදු කිරීමට ශීර්ෂ අන්තර්ගතයන් හඳුනා අවශ්ය නැත.

<span id="header-content">some header content</span>

<div style="height:100%; position:relative;">
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>

— පැට්රික් මැක්ලෙහානි
source

4

fyi ... මෙය මගේ ශීර්ෂක අන්තර්ගතය එහි පළල බිඳ වැටීමට හේතු විය, එබැවින් මට width = '100%'ශීර්ෂක අන්තර්ගතය එක් කිරීමට සිදුවිය

— dsdsdsdsd

2

displaydsdsdsdsd සංදර්ශකය එකතු කිරීමෙන් ඔබට එය නිවැරදි කළ හැකිය: # ශීර්ෂ අන්තර්ගතයට අවහිර කරන්න.

— පැට්‍රික් මැක්ලෙහානි

1

@dsdsdsdsd හේතුව <span>මූලද්‍රව්‍ය display: inline;පෙරනිමියෙන් ඇති නිසා එය කන්ටේනරයේ සම්පූර්ණ පළල නොගනී. වඩාත්ම සුදුසු විසඳුම වනුයේ පරතරය <div>පෙරනිමියෙන් බ්ලොක් අංගයක් වන a ට වෙනස් කිරීමයි .

— BadHorsie

1

නැතහොත් <h1> - <h6> එකක් පෙරනිමියෙන් අවහිර කර ඇති අතර එය ශීර්ෂයක් ලෙස හඳුනා ගනී, එය සෙවුම් යන්ත්‍ර, උපකාරක තාක්ෂණයන් සහ කේතය කියවන පුද්ගලයින්ට ප්‍රයෝජනවත් වේ.

— පැට්‍රික් මැක්ලෙහානි

පතුලේ ඇති අන්තර්ගතයට විචල්‍ය උස ඇති විට එය ක්‍රියා නොකරයි, එය බහාලුම් සීමාවෙන් පිටතට විහිදේ.

— මොස්ෆෙට්

134

පැරණි බ්‍රව්සර් ගැන ඔබ කනස්සල්ලට පත් නොවන්නේ නම් නම්යශීලී කොටුවක් භාවිතා කරන්න.

මව් මූලද්‍රව්‍යයට නම්‍යශීලී වීමට එහි දර්ශන වර්ගය අවශ්‍ය වේ

div.parent {
  display: flex;
  height: 100%;
}

එවිට ඔබ ළමා මූලද්‍රව්‍යයේ පෙළගැස්ම ස්වයං-නම්‍ය-අවසානයට සකසයි.

span.child {
  display: inline-block;
  align-self: flex-end;
}

මෙන්න මම ඉගෙන ගැනීමට භාවිතා කළ සම්පත: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

— ලී ඉර්වින්
source

@bafromca, ක්‍රියා නොකරන හේතු දෙකක්. 1: පෙළගැස්වීමේ අයිතම වෙනුවට 'align-self' භාවිතා කරන්න (මගේ වරද, මම මගේ මුල් ලිපිය සංස්කරණය කළෙමි). 2: මවුපියන්ගේ උස නොමැති නම් 100% උස වැඩ නොකරනු ඇත.

— ලී ඉර්වින්

මා වෙනුවෙන් වැඩ කළේ නැත, මට එය අවශ්‍ය වන්නේ කන්ටේනරයේ පතුලේ මිස කන්ටේනරයේ ඇති අයිතමවල අවසානයට නොවේ.

— මොස්ෆෙට්

1

2020 දී මෙය නිවැරදි පිළිතුර විය යුතුය: caniuse.com/#feat=flexbox

— tonygatta

මම හිතන්නේ මෙය සාපේක්ෂ නිරපේක්ෂයට වඩා හොඳ පිළිතුරකි, එහි නම්‍යශීලීයි

— ශුන්‍ය 8

120

මම මෙම ගුණාංග භාවිතා කරන අතර එය ක්‍රියාත්මක වේ!

#header {
  display: table-cell;
  vertical-align: bottom;
}

— ජොහාන්චොපින්
source

42

IE8 සහ ඊට පෙර සහය නොදක්වයි. එය IE9 හි සහය දක්වයි.

— random_user_name

23

අනුව @cale_b caniuse.com එය වේද 8 යනු වැඩ.

— Zach Lysobey

5

Ach ZachL Happenstance - මම ආයතනික සේවාදායකයෙකු සඳහා IE8 හි පැරණි යෙදුමක් සඳහා සහය දක්වන අතර මෙය ඇත්ත වශයෙන්ම ක්‍රියාත්මක වේ.

— ඩැනියෙල් සාබෝ

4

gufguillen: ක්‍රෝම් (v31) හි දැන්ම පරීක්ෂා කර ඇත. එහි ද වැඩ කරයි.

— ඩැනියෙල් සාබෝ

5

table-cellගොඩක් දේවල් කඩනවා. බූට්ස්ට්‍රැප් ජාල පද්ධතිය මෙන්. col-md-12ඔබට තවදුරටත් 100% පළල බෙදීමක් ලබා නොදේ.

— නෝවා

65

මෙම ගැටලුව සමඟ යම් කාලයක් තිස්සේ අරගල කිරීමෙන් පසුව, මගේ සියලු අවශ්‍යතා සපුරාලන විසඳුමක් මම අවසානයේ සොයා ගතිමි:

කන්ටේනරයේ උස මා දන්නා බව අවශ්‍ය නොවේ.
සාපේක්ෂ + නිරපේක්ෂ විසඳුම් මෙන් නොව, අන්තර්ගතය ස්වකීය ස්ථරයේ පාවෙන්නේ නැත (එනම්, එය සාමාන්‍යයෙන් බහාලුම් කොටසේ අන්තර්ගත වේ).
බ්‍රව්සර් හරහා ක්‍රියා කරයි (IE8 +).
ක්‍රියාත්මක කිරීමට සරලයි.

විසඳුම එකක් ගනී <div>, එය මම "ඇලයින්ජර්" ලෙස හඳුන්වමි:

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html

<div class="bottom_aligner"></div>
... Your content here ...

මෙම උපක්‍රමය ක්‍රියාත්මක වන්නේ උස, කෙට්ටු බෙදීමක් නිර්මාණය කිරීමෙනි, එමඟින් පෙළ පාදම කන්ටේනරයේ පහළට තල්ලු කරයි.

OP ඉල්ලා සිටි දෙය සාක්ෂාත් කර ගන්නා සම්පූර්ණ උදාහරණයක් මෙන්න. නිරූපණ අරමුණු සඳහා පමණක් මම "bottom_aligner" thick න සහ රතු කර ඇත.

CSS:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

පහළ අන්තර්ගතය පෙළගස්වන්න

— ග්‍රෙග් ප්‍රිස්මන්ට්
source

පාහේ පරිපූර්ණයි :) නමුත් එය ස්වයංක්‍රීය රේඛා බිඳීමට ඉඩ නොදේ.

— ගැස්ටන් සැන්චෙස්

පිටත බහාලුමට අනුචලනය කළ හැකි නම් ක්‍රියා නොකරයි (පිටාර ගැලීම- y: ස්වයංක්‍රීය). :(

— ecraig12345

මම හිතන්නේ marin: 8px ආන්තික

— ග්‍රැහැම් පෙරින්

2

::beforeරීතියක් දැමුවහොත් මෙයද ක්‍රියාත්මක වන අතර එමඟින් අතිරේක මූලද්‍රව්‍යයක අවශ්‍යතාවය ඉවත් වේ. අපි අවසානයේ නම්‍යතාවය භාවිතා කළෙමු, නමුත් ඔබට නොහැකි විට මෙය ප්‍රයෝජනවත් වේ.

— බැටළු

මෙය ඇත්තෙන්ම හොඳ විසඳුමකි. එය ක්‍රියාත්මක වන්නේ heightකොටුවේ / බහාලුමේ සහ එහි දෙමව්පියන්ගේ (px හෝ% හෝ ඕනෑම දෙයකට) සකසා ඇත්නම් පමණි .

— බෙයර්දෙව්

38

එය කළ හැකි නවීන ක්‍රමය නම්යශීලී කොටුව භාවිතා කිරීමයි . පහත උදාහරණය බලන්න. Some text...නම්‍යශීලී බහාලුමක් තුළ කෙලින්ම අඩංගු පෙළ නිර්නාමික නම්‍යශීලී අයිතමයකින් ඔතා ඇති බැවින් ඔබට කිසිදු HTML ටැගයකට එතීමට අවශ්‍ය නැත .

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

ස්නිපටය පුළුල් කරන්න

යම් පෙළක් පමණක් තිබේ නම් සහ ඔබට කන්ටේනරයේ පහළට සිරස් අතට පෙළගැස්වීමට අවශ්‍ය නම්.

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}

<section>Some text aligns to the bottom</section>

ස්නිපටය පුළුල් කරන්න

— ස්ටිකර්
source

2

ලේඛන ප්‍රවාහයේ තවමත් රැඳී සිටීමට මට මගේ පහළ පෙළගැස්වූ මූලද්‍රව්‍යය අවශ්‍ය විය, එය භාවිතා කිරීමේදී එය කළ නොහැක position:absolute; . මෙම විසඳුම මගේ නඩුව සඳහා හොඳින් ක්‍රියාත්මක විය!

— ස්වේන්

1

ප්‍රතික්‍රියාකාරක සංරචක ඇතුළත, මෙය නිවැරදි විසඳුමයි. පිළිගත් විසඳුම අසමත් වේ.

— සොලෙයිල් - මැතිව් ප්‍රවොට්

1

ඇත්ත වශයෙන්ම මා වෙනුවෙන් වැඩ කළ එකම විසඳුම මෙයයි. Ole සොලෙල් සඳහන් කළ පරිදි සමහර විට එය ප්‍රතික්‍රියා සමඟ සම්බන්ධ විය හැකිය ... මම CSS විශේෂ expert යෙක් නොවෙමි, එබැවින් මට සම්පූර්ණයෙන්ම විශ්වාස නැත.

— බීකේ

ප්‍රතික්‍රියා සංරචකයේ පරිපූර්ණව ක්‍රියා කරයි

— user1155773

26

display: flex;
align-items: flex-end;

— user3053247
source

2

පැරණි බ්‍රව්සර්වල නම්යශීලී කොටුව හොඳින් සහාය නොදක්වන බව සලකන්න .

— ඇන්තනි බී

12

Nt ඇන්තනි බී - පැරණි යන්න අර්ථ දක්වන්න? සංවර්ධකයින් ලෙස අප මෙම වාර්තාව වෙනස් කළ යුතුය. තාක්‍ෂණය ඉදිරියට යන අතර පැරණි දේ නොනැසී පවතී. IE9 සහ 10 මට පෙනෙන දෙයින් නම්‍යශීලී වීමේ ගැටළු ඇත, නමුත් ඒවා පිළිවෙලින් 2011 සහ 2012 දී නිකුත් කරන ලදි ... එය 2017 වේ. මෙම යල් පැන ගිය හා කැඩුණු බ්‍රව්සර් අපට අතහැර දැමිය යුතුය. දෘශ්‍ය තෘප්තිය සඳහා නොවේ නම්, ආරක්ෂාව සහ සාමාන්‍ය මෘදුකාංග යාවත්කාලීන කිරීම් සඳහා.

— Tisch

3

සංවර්ධකයින් වශයෙන් අපට යහපත් හා නවීන තාක්‍ෂණය භාවිතා කළ යුතුය. නමුත් මම පුදුම නොවීමට මෙම අනුකූලතා ගැටලුව ගැන අනතුරු අඟවන්නෙමි.

— ඇන්තනි බී

යටතේ ඇති අන්තර්ගතය <h1>ඇතුලත තිබේ නම් <p>හෝ <div>මම භාවිතා කරමි justify-content: space-between.

— agapitocandemor

25

මව් / බ්ලොක් මූලද්‍රව්‍යයේ රේඛීය උස පේළිගත කිරීමේ මූලද්‍රව්‍යයට වඩා වැඩි නම් පේළිගත හෝ ඉන්ලයින්-බ්ලොක් මූලද්‍රව්‍ය බ්ලොක් මට්ටමේ මූලද්‍රව්‍යවල පහළට පෙළ ගැස්විය හැකිය. *

සලකුණු කිරීම:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

* ඔබ ප්‍රමිති ප්‍රකාරයේ සිටින බවට වග බලා ගන්න

— ඩග්විග්
source

11

ඔබට සරලව නම්‍යතාවය ලබා ගත හැකිය

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

ස්නිපටය පුළුල් කරන්න

— එම්.කේ. විමලන්
source

6

ඔබට බහු, ගතික උස අයිතම තිබේ නම්, වගුවේ සහ වගු කොටුවේ CSS දර්ශන අගයන් භාවිතා කරන්න:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

මම මෙහි JSBin නිරූපණයක් නිර්මාණය කර ඇත්තෙමි: http://jsbin.com/INOnAkuF/2/edit

එකම තාක්‍ෂණය භාවිතා කරමින් සිරස් අතට කේන්ද්‍රගත වන ආකාරය නිරූපණයට ආදර්ශයක් ඇත.

— romiem
source

5

මෙන්න ෆ්ලෙක්ස් බොක්ස් භාවිතා කරන නමුත් පහළ පෙළගැස්වීම සඳහා ෆ්ලෙක්ස් -එන්ඩ් භාවිතා නොකර තවත් විසඳුමක් . අදහස නියම කිරීමයි margin-bottomමත h1 කිරීමට මෝටර් රථ පහලට ඉතිරි අන්තර්ගතයට තල්ලු කිරීමට:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>

ස්නිපටය පුළුල් කරන්න

පා margin-top:autoon ය මත ද අපට එය කළ හැකි නමුත් මේ අවස්ථාවේ දී අපි එය a divහෝ span:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}

<div id="header">
  <h1>Header title</h1>
  <span>Header content (one or multiple lines)</span>
</div>

ස්නිපටය පුළුල් කරන්න

— ටෙමානි අෆිෆ්
source

පර්ෆෙක්ටෝ! gracias

— ග්‍රේස් නිකොල්

4

මේ සඳහා ඔබට නිරපේක්ෂ + සාපේක්ෂ අවශ්‍ය නොවේ. බහාලුම් සහ දත්ත යන දෙකටම සාපේක්ෂ පිහිටීම භාවිතා කිරීමෙන් එය බොහෝ දුරට හැකි ය. ඔබ එය කරන්නේ මෙයයි.

ඔබගේ දත්තවල උස වනු ඇතැයි උපකල්පනය කරන්න x. ඔබේ බහාලුම සාපේක්ෂ වන අතර පාදකය ද සාපේක්ෂ වේ. ඔබ කළ යුත්තේ ඔබගේ දත්ත වලට එකතු කිරීමයි

bottom: -webkit-calc(-100% + x);

ඔබේ දත්ත සෑම විටම ඔබේ බහාලුම් පතුලේ ඇත. ඔබට ගතික උසකින් යුත් බහාලුමක් තිබුණත් ක්‍රියා කරයි.

HTML මේ වගේ වේවි

<div class="container">
  <div class="data"></div>
</div>

CSS මේ වගේ වේවි

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

මෙහි සජීවී උදාහරණය

මෙය උපකාරී වේ යැයි සිතමි.

— ආදිත්‍ය පොන්ක්ෂේ
source

කරන්නේ කුමක්දැයි ඔබට පැහැදිලි කළ හැකිද bottom: -webkit-calc(-100% + x);?

— mhatch

hatmhatch එය කන්ටේනරයේ පතුලේ පාදම තබා ගනී.

— ආදිත්‍ය පොන්ක්ෂේ

4

මෙන්න එය කිරීමට නම්යශීලී ක්රමය. ඇත්ත වශයෙන්ම, මීට වසර 7 කට පෙර පරිශීලකයාට අවශ්‍ය වූ පරිදි IE8 එයට සහාය නොදක්වයි. ඔබට සහාය දැක්විය යුතු දේ මත පදනම්ව, මේවායින් සමහරක් ඉවත් කළ හැකිය.

කෙසේ වෙතත්, පිටත බහාලුමක් නොමැතිව මෙය කිරීමට ක්‍රමයක් තිබේ නම් හොඳයි, පා text ය තමන්ගේම ආකාරයෙන් පෙළගස්වන්න.

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}

— නොපැහැදිලි වෙබ් ස්මිත්
source

4

ඉතා සරල, එක්-පේළියේ විසඳුමක් නම්, කොට් div ාශයේ සියලු පෙළ පහළට යන බව මතක තබා ගනිමින්, රේඛාවට උස එකතු කිරීම ය.

CSS:

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

HTML:

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

ඔබ තුළ ඇති පෙළ පහළට යාමට අවශ්‍ය වූ විට මෙය ප්‍රායෝගික හා වේගවත් විසඳුමක් බව මතක තබා ගන්න, ඔබට රූප සහ දේවල් ඒකාබද්ධ කිරීමට අවශ්‍ය නම්, ඔබට තරමක් සංකීර්ණ හා ප්‍රතිචාරාත්මක CSS කේත කිරීමට සිදුවේ.

— පැබ්ලෝ කොන්ත්‍රරස්
source

3

සමස්ත # ශීර්ෂකය වෙනුවට, අන්තර්ගතයේ එතීමේ කොටසෙහි උස (අනෙකාගේ පිළිතුරෙහි පෙන්වා ඇති පරිදි # ශීර්ෂ අන්තර්ගතය) සැකසිය හැකි නම්, සමහර විට ඔබට මෙම ප්‍රවේශය උත්සාහ කළ හැකිය:

HTML

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

CSS

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

කෝඩපන් මත පෙන්වන්න

— කෝඩ්බෝයි
source

3

වැඩ කරන බව පෙනේ:

HTML: මම පතුලේ

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

— පරිපාලක ගොනුව 3
source

3

මේ සියලු පිළිතුරු සහ කිසිවක් මා වෙනුවෙන් වැඩ කළේ නැත ... මම නම්යශීලී පෙට්ටි විශේෂ expert යෙක් නොවෙමි, නමුත් මෙය තේරුම් ගැනීම පහසුය, එය සරල හා තේරුම් ගැනීමට සහ භාවිතා කිරීමට පහසුය. ඉතිරි අන්තර්ගතයෙන් යමක් වෙන් කිරීම සඳහා, හිස් බෙදීමක් ඇතුළු කර අවකාශය පිරවීම සඳහා එය වර්ධනය වීමට ඉඩ දෙන්න.

https://jsfiddle.net/8sfeLmgd/1/

.myContainer {
  display: flex;
  height: 250px;
  flex-flow: column;
}

.filler {
  flex: 1 1;
}

<div class="myContainer">
  <div>Top</div>
  <div class="filler"></div>
  <div>Bottom</div>
</div>

කන්ටේනරය ස්ථාවර ප්‍රමාණයේ නොමැති විට පහළ අන්තර්ගතය ප්‍රමාණයේ ස්ථාවර නොවූ විට මෙය අපේක්ෂා කළ පරිදි ප්‍රතික්‍රියා කරයි.

— මොස්ෆෙට්
source

3

මා සඳහන් කර ඇති දෙයට වඩා සරල ක්‍රමයක් මම සැලසුම් කර ඇත්තෙමි.

ශීර්ෂයේ උස සකසන්න. ඉන්පසු එහි ඇතුළත ඔබේ H1ටැගය පහත පරිදි සකසන්න:

float: left;
padding: 90px 10px 11px

මම සේවාදායකයෙකු සඳහා වෙබ් අඩවියක වැඩ කරමින් සිටින අතර, සැලසුමට යම් අංශයක පතුලේ තිබිය යුතුය. මම මෙම පේළි දෙක භාවිතා කරමින් ප්‍රති result ලය ලබාගෙන ඇති අතර එය හොඳින් ක්‍රියාත්මක වේ. එසේම, පෙළ පුළුල් වුවහොත්, පෑඩින් තවමත් එලෙසම පවතිනු ඇත.

— mickburkejnr
source

1

ප්‍රතිචාරාත්මක පිරිසැලසුම් භාවිතයෙන් තිර ප්‍රමාණය වෙනස් කිරීමේදී අන්තර්ගතය වෙනත් අන්තර්ගතයන්ට වඩා පාවීමට හේතු වේ.

— මොස්ෆෙට්

2

මෙම විසඳුම සුපුරුදු බූට්ස්ට්‍රැප් ආරම්භක අච්චුවක පදනම් වී ඇති බව මට පෙනී ගියේය

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}

— එක්ස්මාස්ටර්
source

2

#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

ස්නිපටය පුළුල් කරන්න

— user841657
source

1

මෙය ඉහළ කොටසෙහි ප්‍රමාණය වෙනස් කිරීමට හේතු වේ. එය මූලික පෙළ පිරිසැලසුම් සඳහා ක්‍රියා කරයි, නමුත් දේවල් වලට පසුබිම් සහ වර්ණ හා ගෞරව කිරීමට ප්‍රමාණ ඇති විට එය ක්‍රියා නොකරයි.

— මොස්ෆෙට්

1

ඔබට පහත ප්‍රවේශය භාවිතා කළ හැකිය:

.header-parent {
  height: 150px;
  display: grid;
}

.header-content {
  align-self: end;
}

<div class="header-parent">
  <h1>Header title</h1>
  <div class="header-content">
    Header content
  </div>
</div>

ස්නිපටය පුළුල් කරන්න

— අයන්
source

0

සමඟ උත්සාහ කරන්න:

div.myclass { margin-top: 100%; }

එය නිවැරදි කිරීමට% වෙනස් කිරීමට උත්සාහ කරන්න. උදාහරණය: 120% හෝ 90% ... යනාදිය.

— ෆීලික්ස්
source

අන්තර්ගත 1 කට්ටලයක් සමඟ හොඳින් ක්‍රියා කරයි, නමුත් අන්තර්ගතය වෙනස් වුවහොත් එය සකස් කළ යුතුය. එය ගතික අන්තර්ගතයක් නම්, මෙය භාවිතා නොකරන්න!

— මයික් ග්‍රාෆ්

0

මම සේවාදායකයෙකු සඳහා කළ වෙබ් අඩවිය ඉල්ලා සිටියේ පාදක පා high ය ඉහළ පෙට්ටියක් වන අතර, පතුලේ ඇති පෙළ සරල පෑඩින් කිරීමකින් ලබා ගත් අතර එය සියලු බ්‍රව්සර් සඳහා වැඩ කළ යුතුය.

<div id="footer">
  some text here
</div>

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}

— නිකී එල්. හැන්සන්
source

1

ඔබගේ පළමු ප්‍රකාශය padding: 0 30pxටිකක් අතිරික්තය, ඔබ padding: 30pxඅනෙක් ප්‍රකාශ 2 ද දමා ඇත.

— ඇන්ඩ rew

නියත වශයෙන්ම සත්‍යය, කෙසේ වෙතත් මම මගේ සේවා ස්ථානයේ පිළිවෙත් අනුගමනය කරමි.

— නිකී එල්. හැන්සන්

6

ඇත්තද?, එය සාමාන්‍ය නරක පුරුද්දක් සේ පෙනේ . කෙටිමං භාවිතා කරන්න, නැතහොත් සෑම තැනකම පැහැදිලි වන්න. padding: 60px 30px 8px;,, padding: 60px 30px 8px 30px;පැහැදිලි padding-නීති හතරක් , හෝ @ TheWaxMann ගේ යෝජනාව සියල්ලම උසස් ය - තවද මම එය තර්ක කිරීමට කැමැත්තෙන් හා

— හැකියාවෙන් සිටිමි

-3

පරිපූර්ණ හරස් බ්‍රව්සර් උදාහරණයක් මෙහි බොහෝ විට මෙය විය හැකිය:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

මෙහි අදහස වන්නේ පතුලේ ඇති ඩිවි එක ප්‍රදර්ශනය කිරීම සහ එය එහි ඇලවීමයි. බොහෝ විට සරල ප්‍රවේශය මඟින් ඇලෙන සුළු ඩිව් ප්‍රධාන අන්තර්ගතය සමඟ අනුචලනය වේ.

පහත දැක්වෙන්නේ සම්පුර්ණයෙන්ම වැඩ කරන අවම උදාහරණයකි. ඩිව් කාවැද්දීමේ උපක්‍රමයක් අවශ්‍ය නොවන බව සලකන්න. බොහෝ බී.ආර්. හුදෙක් අනුචලන තීරුවක් දිස්වීමට බල කිරීම සඳහා ය:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>

ඔබේ කේතය IE මත ක්‍රියා නොකරනු ඇතැයි ඔබ සිතන්නේ නම්, ඉහළින් DOCTYPE ටැගය එක් කිරීමට මතක තබා ගන්න. IE හි වැඩ කිරීම සඳහා මෙය ඉතා වැදගත් වේ. එසේම, මෙය පළමු ටැගය විය යුතු අතර ඊට ඉහළින් කිසිවක් නොපෙන්වයි.

— ව්‍යාජ
source

28

ඔබ ඔබේ ලේඛනය XHTML දැඩි ලෙස ප්‍රකාශ කරන බැවින්, ඔබ ඔබේ <br />ටැග් ස්වයං-වසා දැමිය යුතුය ...

— ආමොස් එම්. වඩු කාර්මික

7

@ කාල්කිල්ඩන් ඔබ ආමොස් වෙතින් අදහස් දැක්වීම ගැන සඳහන් කළේ නම්, එය නියත වශයෙන්ම මෝඩ ප්‍රකාශයක් නොවේ - ඉහත ලේඛනය එහි නිවැරදි content-typeශීර්ෂය සමඟ සේවය කිරීමෙන් බ්‍රව්සරය xml විග්‍රහ කිරීමේ දෝෂයක් ඇති වේ.

— රේසර්

7

මෙය නරක පුරුද්දකි! ඒ වෙනුවට CSS භාවිතා කරන්න!

— m93a

-4

වැඩ කරන බව පෙනේ:

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

අඩුවෙන් භාවිතා කිරීම CSS ප්‍රහේලිකා විසඳීමට වඩා කේතීකරණයට වඩා වැඩි කරයි ... මම CSS වලට කැමතියි. එක් පරාමිතියක් වෙනස් කිරීමෙන් ඔබට සම්පූර්ණ පිරිසැලසුම වෙනස් කළ හැකි විට එය සැබෑ සතුටකි.

— esp
source

-7

2015 විසඳුම

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

ඔබව පිළිගන්නවා

— waza123
source

3

මේ සඳහා වගු සැකැස්ම ගැටළු සහගත විය හැකිය; ඒ වෙනුවට CSS නිර්දේශ කෙරේ. වලංගු දේපල HTML5 හි සහය නොදක්වයි. ( w3schools.com/tags/att_td_valign.asp බලන්න )

— undeniablyrob