web-dev-qa-db-fra.com

insérer une ligne de séparation verticale entre deux divisions imbriquées, pas sur toute la hauteur

J'ai flotté à gauche et flotté à droite <div> imbriqué dans un div de boîte bleu clair comme indiqué dans l'image ci-dessous. Je ne peux pas comprendre comment insérer une ligne verticale entre eux comme indiqué dans cette image:

enter image description here

Cela a les propriétés suivantes:

1) rembourrage/marge de chaque côté que je peux contrôler ou semble raisonnable (c'est-à-dire pas beaucoup plus proche d'une div que de l'autre)

2) laisse une marge au-dessus et en dessous comme indiqué, c'est-à-dire ne s'étend pas sur toute la largeur verticale du div bleu clair

3) maintient dynamiquement # 1 et # 2 à mesure que la fenêtre du navigateur s'agrandit/diminue et que la taille de la boîte bleue augmente/diminue avec elle

Je recherche une solution simple, de préférence uniquement CSS.

CSS pertinents:

#left {
  position: relative;
  float: left;
  width: 44%;
  margin: 0;
  padding: 0;
}

#right {
  position: relative;
  float: right;
  width: 49%;
  margin: 0;
  padding: 0;
}

#blue_box {
  position: relative;
  width: 45%;
  min-width: 400px;
  max-width: 600px;
  padding: 2%;
  margin-left: 40%;
  overflow: auto; /*needed so that div stretches with child divs*/
}
htmlcssheightabsolutedivider
22
Tim Koelkebeck

Utilisez un div pour votre diviseur. Il sera toujours centré verticalement, que les divisions gauche et droite soient égales en hauteur. Vous pouvez le réutiliser n'importe où sur votre site.

.divider{
    position:absolute;
    left:50%;
    top:10%;
    bottom:10%;
    border-left:1px solid white;
}

Consultez l'exemple de travail à http://jsfiddle.net/gtKBs/

49
Hussein

Essaye ça. J'ai mis la boîte bleue à flotter à droite, j'ai donné à gauche et à droite une hauteur fixe et j'ai ajouté une bordure blanche à droite de la div gauche. Des coins arrondis ont également été ajoutés pour mieux correspondre à votre exemple (ceux-ci ne fonctionneront pas en 8 ou moins). J'ai également supprimé le poste: relatif. Vous n'en avez pas besoin. Les éléments de niveau bloc sont définis pour se positionner par défaut par défaut.

Voir ici: http://jsfiddle.net/ZSgLJ/

#left {
  float: left;
  width: 44%;
  margin: 0;
  padding: 0;
  border-right: 1px solid white;
  height:400px;
}

#right {
  position: relative;
  float: right;
  width: 49%;
  margin: 0;
  padding: 0;
  height:400px;
}

#blue_box {
  background-color:blue;
  border-radius: 10px;
  -moz-border-radius:10px;
  -webkit-border-radius: 10px;
  width: 45%;
  min-width: 400px;
  max-width: 600px;
  padding: 2%;
  float: right;
}
1
Adam

Vous ne pouvez pas penser à une seule solution CSS, mais ne pourriez-vous pas simplement avoir un div entre ces 2 et définir dans le CSS les propriétés pour ressembler à une ligne comme indiqué dans l'image? Si vous utilisez des divs car ils étaient des cellules de tableau, c'est une solution assez simple au problème

0
John