[ANSWERED] html – Align the green button at the end of each div in css

Question 1

Assign display: flex also to your .produto DIVs, with flex-direction: column and align-items: center. Then add margin-top: auto to the .comprar_button to move it to the bottom of the container (and remove some other, superfluous stuff, see below):

#content01{
 min-height:500px;
 display: flex;
 flex-wrap: wrap;
}

.produto{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 2px solid #F6F6F6;
  width: 246px;
  text-align: center;
  padding-bottom:10px;
}


.comprar_button {
  background: green;
  padding:10px;
  color: #fff;
  font-weight:bold;
  margin-top: auto;
}

.comprar_button a{
  color: #fff!important;
}

.comprar_button img{
  width: 15px;
  height: 15px;
}

<div id="content01">
    
  <div class="produto">Some text<br><br><br><b>$ 20.00</b><br><br>
      <br><span class="comprar_button">COMPRAR</span>
  </div>

  <div class="produto">Some text text some text some text some text<br><br><br><b>$ 20.00</b><br><br>
      <br><span class="comprar_button">COMPRAR</span>
  </div>

  <div class="produto">Some text<br><br><br><b>$ 20.00</b><br><br>
      <br><span class="comprar_button">COMPRAR</span>
  </div>

  <div class="produto">Some text Some text Some text Some text Some text Some text Some text Some text Some text<br><br><br><b>$ 20.00</b><br><br>
      <br><span class="comprar_button">COMPRAR</span>
  </div>

</div>

Question 2

Is this what you want? It used position absolute.

https://jsfiddle.net/usv7jLhm/

.produto{
    position: relative;
    display: inline-block;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 2px solid #F6F6F6;
    width: 246px;
    text-align: center;
    vertical-align: top;
    padding-bottom:10px;
}

.comprar_button {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: green;
    padding:10px;
    color: #fff;
    text-align:center;
    font-weight:bold;
    vertical-align:bottom;
    align-self: flex-end;
}

Question 3

using flex I commented the changes I did in the code :
https://jsfiddle.net/3jenapsb

#content01{
 min-height:500px;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}

.produto{
  
  display: flex;/*added*/
  flex-direction:column;/*added*/
  align-items:center;/*added*/
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 2px solid #F6F6F6;
  width: 246px;
  text-align: center;
  vertical-align: top;
  padding-bottom:10px;
}

b{
  flex-grow:1;/*added*/
}

.comprar_button {
	background: green;
	padding:10px;
	color: #fff;
	text-align:center;
	font-weight:bold;
	vertical-align:bottom;
	width:150px;/*added*/
}
.comprar_button a{
	color: #fff!important;
}
.comprar_button img{
	width: 15px;
	height: 15px;
}

<div id="content01">

<div class="produto">Some text<br><br><br><b>$ 20.00</b><br><br>
		<br><span class="comprar_button">COMPRAR</span>
</div>
    
<div class="produto">Some text text some text some text some text<br><br><br><b>$ 20.00</b><br><br>
		<br><span class="comprar_button">COMPRAR</span>
</div>

<div class="produto">Some text<br><br><br><b>$ 20.00</b><br><br>
		<br><span class="comprar_button">COMPRAR</span>
</div>

<div class="produto">Some text Some text Some text Some text Some text Some text Some text Some text Some text<br><br><br><b>$ 20.00</b><br><br>
		<br><span class="comprar_button">COMPRAR</span>
</div>
   
   
   </div>

Question 4

I have this “buy” (comprar) button that I’d like to put in the end of div so they would be align with each other “buy” button.

eg:

button button button

not:

button            button
       button

#content01{
 min-height:500px;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}

.produto{
  display: inline-block;
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 2px solid #F6F6F6;
  width: 246px;
  text-align: center;
  vertical-align: top;
  padding-bottom:10px;
}


.comprar_button {
  background: green;
  padding:10px;
  color: #fff;
  text-align:center;
  font-weight:bold;
  vertical-align:bottom;
  align-self: flex-end;
}

.comprar_button a{
  color: #fff!important;
}

.comprar_button img{
  width: 15px;
  height: 15px;
}

<div id="content01">
    
  <div class="produto">Some text<br><br><br><b>$ 20.00</b><br><br>
      <br><span class="comprar_button">COMPRAR</span>
  </div>

  <div class="produto">Some text text some text some text some text<br><br><br><b>$ 20.00</b><br><br>
      <br><span class="comprar_button">COMPRAR</span>
  </div>

  <div class="produto">Some text<br><br><br><b>$ 20.00</b><br><br>
      <br><span class="comprar_button">COMPRAR</span>
  </div>

  <div class="produto">Some text Some text Some text Some text Some text Some text Some text Some text Some text<br><br><br><b>$ 20.00</b><br><br>
      <br><span class="comprar_button">COMPRAR</span>
  </div>

</div>

https://jsfiddle.net/j72u8Lx5/

how can I align the “comprar” button?

Bollate

[ANSWERED] html – Align the green button at the end of each div in css

By

Solution 1 :

Solution 2 :

Solution 3 :

Problem :

Comments

Comment posted by Align an element to bottom with flexbox

By

Related Post

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

[ANSWERED] javascript – How to handle repeating values in JQuery

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate