0

He estado consultando y la única opción que dan es de darle al parent position: relative y al child position: absolute; bottom: 0px;

Lo que me pasa es que el div que quiero posicionar se sitúa encima de los <p>que tengo anteriormente. Y no quiero ponerle un height específico porque si no en el media queries tengo que hacer muchos valores de píxeles.

.parentcolumnecom {
  overflow: hidden;
  margin: 50px 50px 20px 50px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.columnecom, .columnecom1, .columnecom2 {
  width: 33.33%;
  flex: 1;
  padding: 30px;
  border-radius: 20px;
  background-color: #929FB1;
  position: relative;
}

.columnecom {
  float: left;
  margin-right: 10px;
}

.columnecom1 {
  margin-right: 10px;
  margin-left: 10px;
}

.columnecom2 {
  float: right;
  margin-left: 10px;
}

.title-sect{
  text-transform: uppercase;
  background-color: white;
  border-radius: 10px;
}

.benefits{
  margin-top: auto;
  margin-bottom: auto;
  padding: 10px;
  border: #225E8A 2px solid;
  background-color: white;
  border-radius: 20px;
  position: absolute;
  bottom: 0px;
}
<div class="parentcolumnecom">
  <div class="columnecom">
    <hr>
    <h2 class="text-center title-sect">Comerç no segur</h2>
    <hr>
    <div class="text-size18">
      <p>És el mode més bàsic de treballar amb el Comerç Electrònic.</p>
      <p>No proporciona ningun tipus de seguretat al comerç, ja que l'únic requerit són les dades bàsiques de la targeta dins el procés de compra (PAN + Caducitat + CVV)</p>
    </div>
    <div class="benefits text-center">
      <p><strong>Principal avantatge:</strong></p>
      <p class="text-left">Per a l'usuari, el procès de compra, és més ràpid i senzill.</p>
      <p><strong>Principal inconvenient:</strong></p>
      <p class="text-left">en tractar-se d'un comerç no segur, el banc trasllada el risc d'estafa al comerç; si un client reclama una transacció ("chargeback"), el banc sempre li donarà la raó al client fent així que el comerç no cobri l'import de la transacció. (No hi ha manera d'evitar transaccions amb una targeta robada)</p>
    </div>
  </div>
  <div class="columnecom1">
    <hr>
    <h2 class="text-center title-sect">Comerç segur</h2>
    <hr>
    <div class="text-size18">
      <p>Aquest mètode és l'equivalent a la utilització del PIN en el comerç presencial.</p>
      <p>Per poder completar les transaccions en aquest mètode es necessita el PIN o la contrasenya que només el titular coneix, de tal manera que no s'acceptarà un "chargeback" amb l'argument "jo no he fet aquesta compra" Es coneix com a "3D-Secure". A l'hora de processar el pagament, es redirigeix l'ordre al banc del titular, qui pot actuar segons el procés determinat pel seu banc. El titular introdueix el codi, el banc el valida i el procés de compra finalitza.</p>
    </div>
    <div class="benefits text-center">
      <p><strong>Principal avantatge:</strong></p>
      <p class="text-left">Les operacions tenen un alt grau de seguretat, ja que el titular ha "firmat" les transaccions. És molt més difícil que s'ocasionin "chargebacks", ja que el risc es trasllada al banc.</p>
      <p><strong>Principal desavantatge:</strong></p>
      <p class="text-left">El procés de compra és més laboriós per al titular.</p>
    </div>
  </div>
  <div class="columnecom2">
    <hr>
    <h2 class="text-center title-sect">Funcionament dinàmic (No segur + segur)</h2>
    <hr>
    <div class="text-size18">
      <p>És un híbrid de les dues modalitats citades anteriorment.</p>
      <p>És utilitzat comunament de la següent manera:</p>
      <p>La primera compra d'un nou client sol·licita el comerç segur, a partir d'aquí, en les següents compres, s'utilitza el comerç no segur.</p>
      <p>Es poden utilitzar diferents regles perquè, per exemple, una compra successiva que impliqui un import més alt de l'establert accioni el comerç segur encara que el client ja s'hagi identificat.</p>
    </div>
    <div class="benefits text-center">
      <p><strong>Principal avantatge:</strong></p>
      <p class="text-left">les operacions tenen un alt grau de seguretat, ja que el titular ha "firmat" les transaccions.</p>
      <p><strong>Principal inconvenient:</strong></p>
      <p class="text-left"> La primera compra, o les compres sota un determinat criteri, són una mica més laborioses pel titular.</p>
    </div>
  </div>
</div>

Entonces, lo que me gustaría es que los 3 divs tuvieran el mismo tamaño y además, que ese cuadro class="benefits" se colocara al final del <div> parent independientemente del height que tenga el mismo.

2 respuestas 2

1

.parentcolumnecom {
	overflow: hidden;	
	margin: 50px 50px 20px 50px;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;	
}

.columnecom, .columnecom1, .columnecom2 {
	width: 33.33%;
	flex: 1;
	padding: 30px;
	border-radius: 20px;
	background-color: #929FB1;
    position: relative;
    float: left;
	margin-right: 10px;
    display: grid;
    grid-template-rows: repeat(1,1fr);
    grid-template-areas: 
      "a"
      "b";  
}

.columnecom {
	float: left;
	margin-right: 10px;
}

.columnecom1 {
	margin-right: 10px;
	margin-left: 10px; 	
}

.columnecom2 {
	float: right;
	margin-left: 10px;
}

.title-sect{
	text-transform: uppercase;
	background-color: white;
	border-radius: 10px;
}

.benefits{
	margin-top: auto;
	margin-bottom: auto;
	padding: 10px;
	border: #225E8A 2px solid;
	background-color: white;
	border-radius: 20px;
    bottom: 0px;
    grid-area: b;
    align-items: end;
}

.contenedor-texto {
    grid-area: a;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parentcolumnecom">
    <div class="columnecom columna">
        <div class="contenedor-texto">
		    <hr>
			<h2 class="text-center title-sect">Comerç no segur</h2>
			<hr>
			<div class="text-size18">
		        <p>És el mode més bàsic de treballar amb el Comerç Electrònic.</p>
				<p>No proporciona ningun tipus de seguretat al comerç, ja que l'únic requerit són les dades bàsiques de la targeta dins el procés de compra (PAN + Caducitat + CVV)</p>
        </div>
    </div>
	<div class="benefits text-center">
	    <p><strong>Principal avantatge:</strong></p>
		<p class="text-left">Per a l'usuari, el procès de compra, és més ràpid i senzill.</p>
		<p><strong>Principal inconvenient:</strong></p>
		<p class="text-left">en tractar-se d'un comerç no segur, el banc trasllada el risc d'estafa al comerç; si un client reclama una transacció ("chargeback"), el banc sempre li donarà la raó al client fent així que el comerç no cobri l'import de la transacció. (No hi ha manera d'evitar transaccions amb una targeta robada)</p>
    </div>
</div>

<div class="columnecom1 columna">
    <div class="contenedor-texto">
	    <hr>
	    <h2 class="text-center title-sect">Comerç segur</h2>
	    <hr>
	    <div class="text-size18">
		    <p>Aquest mètode és l'equivalent a la utilització del PIN en el comerç presencial.</p>
		    <p>Per poder completar les transaccions en aquest mètode es necessita el PIN o la contrasenya que només el titular coneix, de tal manera que no s'acceptarà un "chargeback" amb l'argument "jo no he fet aquesta compra" Es coneix com a "3D-Secure". A l'hora de processar el pagament, es redirigeix l'ordre al banc del titular, qui pot actuar segons el procés determinat pel seu banc. El titular introdueix el codi, el banc el valida i el procés de compra finalitza.</p>
	    </div>
    </div>

	<div class="benefits text-center">
		<p><strong>Principal avantatge:</strong></p>
		<p class="text-left">Les operacions tenen un alt grau de seguretat, ja que el titular ha "firmat" les transaccions. És molt més difícil que s'ocasionin "chargebacks", ja que el risc es trasllada al banc.</p>
		<p><strong>Principal desavantatge:</strong></p>
		<p class="text-left">El procés de compra és més laboriós per al titular.</p>
	</div>
</div>
	   	
<div class="columnecom2 columna">
    <div class="contenedor-texto">
		<hr>
		<h2 class="text-center title-sect">Funcionament dinàmic (No segur + segur)</h2>
		<hr>
		<div class="text-size18">
			<p>És un híbrid de les dues modalitats citades anteriorment.</p>
			<p>És utilitzat comunament de la següent manera:</p>
			<p>La primera compra d'un nou client sol·licita el comerç segur, a partir d'aquí, en les següents compres, s'utilitza el comerç no segur.</p>
			<p>Es poden utilitzar diferents regles perquè, per exemple, una compra successiva que impliqui un import més alt de l'establert accioni el comerç segur encara que el client ja s'hagi identificat.</p>
		</div>
    </div>
	<div class="benefits text-center">
		<p><strong>Principal avantatge:</strong></p><p class="text-left">les operacions tenen un alt grau de seguretat, ja que el titular ha "firmat" les transaccions.</p>
		<p><strong>Principal inconvenient:</strong></p><p class="text-left"> La primera compra, o les compres sota un determinat criteri, són una mica més laborioses pel titular.</p>
	</div>
</div>
</div>

Podrías valerte del uso de Grid layout. Es una funcionalidad bastante potente, y aunque no soy un experto en su uso, creo que para tu caso he encontrado una solución que consigue lo que necesitas.

Lo que hago es dividir cada columna en dos bloques o rows, una contiene el texto que va antes del item que quieres posionar abajo y la otra contiene el item que quieres posicionar (he usado la propia clase .beneficts que tienes definida).

Tras hacer esta división lo que hago es posicionar el contenido de .beneficts abajo del todo de su fila.

2
  • Muchísimas gracias! Da el efecto tal cual lo quería! Siendo sincera, no había visto nunca el "gird layout". Gracias por enseñármelo, así puedo aprender un poco más sobre css y cómo colocar el contenido.
    – Yuna Sch
    Commented el 1 abr. 2019 a las 14:24
  • developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout/… Ahí te dejo un link con documentación. Y no olvides que la mejor forma de agradecer es marcar como aceptada la respuesta que te ha valido, y ya si le das un +1 lo bordas ;)
    – phpMyGuel
    Commented el 1 abr. 2019 a las 14:26
0

Hay varias maneras de solucionar tu problema, una es la que mencionas con

style="position:absolute;bottom:0px"

que eso no tiene nada que ver con el tamaño que va a tener la div, que eso lo puedes arreglar haciendo tamaños relativos a los padres:

<div class="parent">
    <div class="children" style="height:30%"></div>
<div class="parent">

en este caso la división tendrá el 30% del padre relativamente en cualquier ocasión.

P.D: como consejo, busca la manera de preguntar por problemas mínimos, completos y verificables ya que es difícil entender bién tu problema: https://stackoverflow.com/help/mcve

está en inglés pero de seguro que hay un ejemplo en español

1
  • Claro, pero a mí lo que no me interesaba era especificarle un height como bien digo arriba, ya que me ha traído varios problemas. Gracias
    – Yuna Sch
    Commented el 1 abr. 2019 a las 14:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.