Placer une div en dessous de l'autre (à l'aide de flexbox)

Je suis en train d'essayer de placer le timeAgo c'est à dire 22 seconds ago contenu juste en dessous de la info de contenu. Mais, pour le style, je suis en utilisant, timeAgo est poussé vers la droite.


Voici mon balisage -

CSS:

.container {
		
		overflow:auto;
		
	}
	.post {
		height:120px;
		width:700px;
		margin:120px auto;
		background-color:#EFEFEF;
		border:1px solid #79CEF4;
		display:flex;
		justify-content:flex-start;		
	}
	
	
	.photo {
		width:80px;
		height:80px;
		background-color:#99E058;
		margin:10px 10px 10px 20px;
		align-self:center;
		
	}
	
	.info {
		
		margin: 25px 10px 10px 20px;
		align-self:center;
		
	}
	
	.timeAgo {
		margin: 80px 10px 10px 20px;
		font-size:11px;
		
	}

HTML:

<div class="container">

     <div class="post">
        
        <div class="photo"></div>
        <div class="info"><p>This is just a plain simple message!</p></div>
        <div class="timeAgo">22 seconds ago</div>
    
     </div>
    
    </div>

InformationsquelleAutor | 2015-10-25
  1. 4

    La chose la plus simple à faire est d'ajuster le HTML.

    CSS:

    .post {
  height: 120px;
  width: 700px;
  margin: 20px auto;
  background-color: #EFEFEF;
  border: 1px solid #79CEF4;
  display: flex;
  align-content: center;
  justify-content: flex-start;
}
.imgwrap {
  text-align: center;
}
.photo {
  width: 80px;
  height: 80px;
  background-color: #99E058;
  margin: 10px 10px 10px 20px;
}
.info {
  margin: 25px 10px 10px 20px;
}
.timeAgo {
  font-size: 11px;
}

    HTML:

    <div class="post">
  <div class="imgwrap">
    <div class="photo"></div>
    <div class="timeAgo">22 seconds ago</div>
  </div>
  <div class="info">
    <p>This is just a plain simple message!</p>
  </div>


</div>

    MAIS...si vous ne pouvez pas faire cela, vous aurez à laisser le flex-conteneur pour envelopper et faire la timeAgo div être contraints à la seconde, 'ligne'.

    D'une manière:

    CSS:

    .post {
  height: 120px;
  width: 700px;
  margin: 20px auto;
  background-color: #EFEFEF;
  border: 1px solid #79CEF4;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}
.photo {
  flex: 0 0 80px;
  height: 80px;
  background-color: #99E058;
  margin: 10px 10px 0px 10px;
}
.info {
  flex: 1;
  display: flex;
  align-self: center;
}
.timeAgo {
  flex: 0 0 100%;
  font-size: 11px;
  margin: 10px;
}

    HTML:

    <div class="post">

  <div class="photo"></div>


  <div class="info">
    <p>This is just a plain simple message!</p>
  </div>

  <div class="timeAgo">22 seconds ago</div>
</div>

    • Pour éviter toute confusion par les futurs visiteurs veuillez noter que la réponse a été acceptée, même si le .timeAgo div a été placée sous le .photo div, pas la .info div, tel que requis par la question.
    • il travaillera pour IE10 ?
    InformationsquelleAutor Paulie_D
  2. 28

    C'est beaucoup plus simple de répondre. Utilisation flex-direction: column;!

    .post {
    height:120px;
    width:700px;
    margin:120px auto;
    background-color:#EFEFEF;
    border:1px solid #79CEF4;
    display:flex;
    justify-content:flex-start; 
    flex-direction: column; /*This solves everything*/
}
    • Il a travaillé pour moi. Mais comment peut-on aligner les éléments dans le milieu de la div parent? Même en utilisant alignez-les éléments du centre ne semble pas fonctionner
    InformationsquelleAutor Aminah Nuraini
  3. -1

    Ce n'est pas une solution idéale, mais encore;

    .timeAgo {
    margin: 80px 10px 10px -260px;
    font-size:11px;
}
    InformationsquelleAutor damianK