2
votes

Comment réparer l'espace après deux colonnes à l'intérieur d'une ligne, la troisième commence à la fin de la seconde créant un grand espace?

J'ai 2 colonnes dans une ligne et une colonne à l'extérieur de la première ligne. rangée col-1 col-2 col-3 Le problème est que le col-3 commence à la fin de col-1, donc en mode bureau, il y a un écart entre col-1 et col-3 et l'écart continue de croître aussi grand que col-2. Comment puis-je faire en sorte que col-3 ne démarre pas après la hauteur de col-2 et par conséquent, il n'y a pas de grand espace entre col-1 et col-3? J'ai essayé de mettre tous les cols à l'intérieur de la ligne et de mettre order-first et order-last

Voici à quoi ça ressemble:

<div class="row">
  <div class="col-md-8">
   col-1
  </div>
  <div class="col-md-4"> 
     col-2
  </div>
  <div class="col-md-8 pull-left">
       col-3
  </div>
</div>

Voici à quoi ça devrait ressembler: p>

|col-1  ||col-2|
|       ||     |
 ------- |     |
col-3    |     |
---------|     |

J'ai essayé de mettre tous les cols à l'intérieur de la ligne et de mettre ordre en premier et ordre en dernier

|col-1  ||col-2|
|       ||     |
 ------- |     |
         |     |
---------
col-3
---------

Le résultat attendu devrait être celui il n'y a pas d'espace après col-1 avec col-2. Donc, col-3 ne devrait pas commencer après la hauteur de col-2.

html css bootstrap-4

0 commentaires

3 Réponses :

1
votes

Je vous suggère d'utiliser le bootstrap flex css pour y parvenir car c'est beaucoup plus facile. J'ai ajouté un code de test. J'espère que cela aidera votre problème

HTML

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.red {
  background: red;
  padding: 10px;
}

.green {
  background: green;
  padding: 10px;
}

CSS

<div class="flex-row">
  <div class="flex-column">
    <div class="col-md-8 red">
      Column 1
    </div>
    <div class="col-md-8 red">
      Column 2
    </div>
  </div>
  <div class="col-md-4 green">
  Column 3
  </div>
</div>

Lien JS Fiddle: https://jsfiddle.net/SJ_KIllshot/pqtxL9bs/

1 commentaires

Je les ai tous essayés et aucun n'a fonctionné. J'essaie essentiellement de réaliser la mise en page YouTube en regardant une vidéo. Où vous avez col1 le lecteur vidéo, col2 les prochaines vidéos et col3 juste en dessous de col1. Le problème est que col3 démarre après la fin de col3, créant un espace entre col1 et 3 en mode bureau.

1
votes

EDIT[p>

Voici un exemple de base sur YouTube utilisant flexbox. Vous pouvez nettoyer le CSS.

CodePen

https: //codepen.io/matrixme/pen/wbqvZb

HTML

body {
  width: 100vw;
  margin: 0;
  top: 0;
  height: auto;
  background-color: #323232;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: flex-start;
}

h2 {
  width: 100%;
  text-align: center;
  font-size: 30px;
  font-weight: 300;
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: flex-start;
  width: 70%;
  background-color: #F2F2F2;
}

.col--one {
  position: relative;
  width: 70%;
  height: 100vh;
  background-color: #F2F2F2;
}

.col--two {
  position: relative;
  width: 30%;
  height: auto;
  background-color: #F2F2F2;
  border-left: 1px solid #CCCCCC;
}

.row {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.video {
  position: relative;
  height: 350px;
  background-color: #EEEEEE;
}

.forum {
  flex-wrap: wrap;
  align-content: flex-start;
  height: 500px;
  background-color: #dddddd;
  position: relative;
}

ul {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 0;
  list-style: none;
  margin: 0;
}

.thread {
  position: relative;
  height: 50px;
  background-color: #ffffff;
  width: 90%;
}


.thumbnail {
  position: relative;
  height: 200px;
  background-color: #ffffff;
  width: 80%;
  margin-bottom: 20px;
}

CSS

    <div class="container">
        <div class="col--one">
            <div class="row video">
                <h2>Video</h2>
            </div>
            <div class="row forum">
                <h2>Forum</h2>
                <ul>
                    <li class="thread"></li>
                    <li class="thread"></li>
                    <li class="thread"></li>
                </ul>
            </div>
        </div>
        <div class="col--two">
            <h2>Related</h2>
            <ul>
                <li class="thumbnail">

                </li>
                <li class="thumbnail">

                </li>
                <li class="thumbnail">

                </li>
                <li class="thumbnail">

                </li>
            </ul>
        </div>
    </div>

2 commentaires

@dianesis J'ai créé un CodePen et inclus un exemple

0
votes

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row eq-height">
    <div class="col-8">
      <div class="h-50 content">Atul</div>
      <div class="h-50 content">Rajput</div>
    </div>
    <div class="col-4">
      <div class="content h-100">Kumar</div>
    </div>  
  </div>
</div>

.content {
  background: #999;
  border: 1px solid red;
}

.h50 {
  height: 50%;
}

Il n'est pas nécessaire d'écrire autant de CSS pour cela, changez simplement la structure HTML et un peu de CSS vous aidera.

1 commentaires