Je crée une mise en page réactive à l'aide de bootstrap. La mise en page comporte trois lignes. La rangée supérieure a deux colonnes et elles s'empilent verticalement dans de petits écrans. La colonne de droite sur la rangée du haut contient plus d'informations et, par conséquent, la hauteur est supérieure à celle de gauche.

Dans les résolutions de bureau, j'ai masqué le contenu de la colonne de droite en utilisant la propriété overlfow:hidden. Cependant, dans la résolution du téléphone, je ne veux pas que ce contenu soit masqué car les colonnes sont empilées verticalement. Pour y parvenir, je mets le débordement sur caché à l'aide d'une requête multimédia.

Là où je suis actuellement bloqué, si je n'ai pas overflow:hidden pour la colonne de droite dans la rangée du haut clearfix doesn't work and the contents of the right column overlaps the second row.
Wondering what i am doing wrong.

Veuillez trouver le jsfiddle ici https://jsfiddle.net/uyxgo70k/2/

Mise à jour:

J'ai suivi les conseils de @DigitalDouble et j'ai fait fonctionner le prototype. Cependant, lorsque je garde l'image et le contenu dans un élément de carrousel, height: auto ne fonctionne pas. Vous ne savez pas quelle propriété à l'intérieur des classes du carrousel empêche la hauteur: auto de prendre effet.

J'ai mis à jour le jsfiddle ici

https://jsfiddle.net/uyxgo70k/7/

css
1
Arun 23 déc. 2015 à 05:58

2 réponses

Meilleure réponse

Le problème ici n'est pas clearfix. Le problème est le suivant:

div.row div {
    height: 100%;
    ...
}

div#top div {
    height: 100%;
}

Vous donnez à votre conteneur une hauteur "fixe". Ainsi, le contenu déborde du conteneur et survole la ligne suivante, sauf si vous utilisez overflow: hidden

Une solution rapide serait d'ajouter height: auto à votre #div-desc sur les appareils mobiles à l'aide de requêtes multimédias.

@media (max-width: 767px){
    #top #div-desc {
       height: auto;
    }
}

https://jsfiddle.net/uyxgo70k/6/

0
DigitalDouble 23 déc. 2015 à 03:19

Vous avez défini des hauteurs fixes pour que les div se chevauchent, car leurs tailles de mise en page sont plus petites que leur contenu.

Vous devez définir les hauteurs sur auto ou laisser non défini. Cela vous aide-t-il dans la direction que vous souhaitez? https://jsfiddle.net/gmbxgjub/

@media only screen and (min-width : 768px) {
  #div-desc{
      height: 100%;
      overflow:hidden;
  }
  #top{
    height: 40%;
  }

  div#top div{
    height: 100%;
  }

  #top.div img{
    height: 100%;
  }
}

J'ai déplacé les définitions de hauteur dans la requête multimédia

0
Norbert 23 déc. 2015 à 03:20