如何在 div 的顶部和底部显示两个元素，即 css 中的自动高度

Question

I have two div one is left and one is right. and have two element in right div and I want to place one at the top of the div and another one is at the bottom. the height of left element is auto so is right one and we can not fix the height because of dynamic content.

 #mainDiv.list_desc { width: 80%; height: 100%; display: inline-block; vertical-align: top; } #mainDiv.list_desc.title { font-size: 44px; color: #000066; padding: 15px; } #mainDiv.list_desc.tag { width: 100%; padding: 15px; } #mainDiv.list_desc.tag.facility_tag { display: inline-block; text-align: left; width: 25%; font-size: 22px; color: #000066; } #mainDiv.list_desc.desc { font-size: 26px; padding: 15px; } #mainDiv.list_price { width: 19%; height: 100%; display: inline-block; border: 1px solid blue; } #mainDiv.list_price.top_price { height: 90%; border: 1px solid black; font-size: 48px; text-align: right; padding: 15px; } #mainDiv.list_price.bottom_button { height: 10%; border: 1px solid blue; } #mainDiv.list_price.bottom_button.select_room_btn { width: 100%; border: 1px solid #000066; text-align: center; font-size: 26px; }

 <div id="mainDiv"> <div class="list_section"> <div class="singlelist"> <div class="list_desc"> <div class="title">My title</div> <div class="tag"> <div class="facility_tag tag1">Tag1</div> <div class="facility_tag tag2">Tag2</div> <div class="facility_tag tag3">Tag3</div> </div> <div class="desc">If you have ever looked for new fonts to download, then 'the quick brown fox jumps over the lazy dog' is a sentence that you have probably seen before. This pangram is often seen next to fonts that are on display. The font's style is applied to the pangram, giving an example of what the font would look like in a sentence and also for the individual letters. This is one of the common uses of pangrams these days; to display different styles of fonts.If you have ever looked for new fonts to download, then 'the quick brown fox jumps over the lazy dog' is a sentence that you have probably seen before. This pangram is often seen next to fonts that are on display. The font's style is applied to the pangram, giving an example of what the font would look like in a sentence and also for the individual letters. This is one of the common uses of pangrams these days; to display different styles of fonts.If you have ever looked for new fonts to download, then 'the quick brown fox jumps over the lazy dog' is a sentence that you have probably seen before. This pangram is often seen next to fonts that are on display. The font's style is applied to the pangram, giving an example of what the font would look like in a sentence and also for the individual letters. This is one of the common uses of pangrams these days; to display different styles of fonts.</div> </div> <div class="list_price"> <div class="top_price">$100</div> <div class="bottom_button"> <div class="select_room_btn">Select This</div> </div> </div> </div> </div> </div>

Js fiddle: https://jsfiddle.net/pbvfr1hq/

Select this button should be at the bottom of description in right div.

Answer 1

On the div that wrapps the items you want to adjust, say display: flex; flex-direction: column; justify-content: space-between; *the first and last div will be placed on top and bottom

Answer 2

(EDITED) Your CSS should look like this:

  #mainDiv .list_desc{
   height:100%;display:inline-block;vertical-align:top;
  }
  #mainDiv .list_desc .title{
   font-size:44px;color:#000066;padding:15px;
  }
  #mainDiv .list_desc .tag{
   width:100%;padding:15px;
  }
  #mainDiv .list_desc .tag .facility_tag{
   display:inline-block;text- 
   align:left;width:25%;font-size:22px;color:#000066;
  }
  #mainDiv .list_desc .desc{
   font-size:26px;padding:15px;
  }

  #mainDiv .list_price{
   height:100%;display:inline-block;border:1px solid blue;
  }
  #mainDiv .list_price .top_price{
   border:1px solid black;font-size:48px;text-align:right;padding:15px;
  }
  #mainDiv .list_price .bottom_button{
    border:1px solid blue;
  }
  #mainDiv .list_price .bottom_button .select_room_btn{
    width:100%;border:1px solid #000066;text-align:center;font-size:26px;
  }

  #mainDiv .singlelist {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    justify-content: space-between;
  }

  #mainDiv .list_desc {
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%;
  }

  #mainDiv .singlelist .list_price{
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-direction: column;
    height: auto;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
    border: none;
  }

  #mainDiv .singlelist .list_price .top_price{
    height: auto;
  }
  #mainDiv .singlelist .list_price .bottom_button{
    margin-top: auto;
  }

Answer 3

I think you can use display:grid to solve your problem.

 .singlelist { display: grid; grid-template-columns: 80% auto; grid-template-row: auto; column-gap: 0; row-gap: 0; } #mainDiv.list_desc { width: 100%; height: 100%; display: inline-block; vertical-align: top; } #mainDiv.list_desc.title { font-size: 44px; color: #000066; padding: 15px; } #mainDiv.list_desc.tag { width: 100%; padding: 15px; } #mainDiv.list_desc.tag.facility_tag { display: inline-block; text-align: left; width: 25%; font-size: 22px; color: #000066; } #mainDiv.list_desc.desc { font-size: 26px; padding: 15px; } #mainDiv.list_price { width: 100%; height: 100%; display: inline-block; border: 1px solid blue; display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; } #mainDiv.list_price.top_price { border: 1px solid black; font-size: 48px; text-align: right; padding: 15px; } #mainDiv.list_price.bottom_button { border: 1px solid blue; } #mainDiv.list_price.bottom_button.select_room_btn { width: 100%; border: 1px solid #000066; text-align: center; font-size: 26px; }

 <div id="mainDiv"> <div class="list_section"> <div class="singlelist"> <div class="list_desc"> <div class="title">My title</div> <div class="tag"> <div class="facility_tag tag1">Tag1</div> <div class="facility_tag tag2">Tag2</div> <div class="facility_tag tag3">Tag3</div> </div> <div class="desc">If you have ever looked for new fonts to download, then 'the quick brown fox jumps over the lazy dog' is a sentence that you have probably seen before. This pangram is often seen next to fonts that are on display. The font's style is applied to the pangram, giving an example of what the font would look like in a sentence and also for the individual letters. This is one of the common uses of pangrams these days; to display different styles of fonts.If you have ever looked for new fonts to download, then 'the quick brown fox jumps over the lazy dog' is a sentence that you have probably seen before. This pangram is often seen next to fonts that are on display. The font's style is applied to the pangram, giving an example of what the font would look like in a sentence and also for the individual letters. This is one of the common uses of pangrams these days; to display different styles of fonts.If you have ever looked for new fonts to download, then 'the quick brown fox jumps over the lazy dog' is a sentence that you have probably seen before. This pangram is often seen next to fonts that are on display. The font's style is applied to the pangram, giving an example of what the font would look like in a sentence and also for the individual letters. This is one of the common uses of pangrams these days; to display different styles of fonts.</div> </div> <div class="list_price"> <div class="top_price">$100</div> <div class="bottom_button"> <div class="select_room_btn">Select This</div> </div> </div> </div> </div> </div>

You will want to write media queries in order to make it responsive.

You can learn about grid property here: https://css-tricks.com/snippets/css/complete-guide-grid/

You can edit it at codepen .