Le chevauchement des Bordures 1 px faire une bordure plus épaisse

Est-il un moyen, quand j'ai plus de rodage (le toucher) div, de prendre la 1px frontière à ne pas devenir de 2 pixels. Et je sais que je pourrais juste mettre une bordure sur 2 sur les côtés, mais alors l'un bord de la div n'y aurait pas une frontière. En passant, je suis en utilisant jQuery Maçonnerie.

si vous utilisez de la maçonnerie ..., vous êtes probablement à la conception de réactivité / alors assurez-vous de regarder dans :nth-of-type --- découvrez ces css-tricks.com/how-nth-child-works css-tricks.com/the-difference-between-nth-child-and-nth-of-type
Où est ton code? Où pouvons-nous voir ce que vous avez essayé? Le chevauchement ou le toucher? Qu'est-ce que "la 1px frontière"?

OriginalL'auteur Sam Clark | 2012-08-27

  1. 7

    oui la div sur le droit ressemblerait à quelque chose comme ceci

         border: 1px solid #fff;
     border-left: none;

    la deuxième frontière-gauche pour remplacer la bordure gauche qui vient d'être mis sur il y

    EDIT:

    ok, depuis que vous êtes à l'aide de jQuery masonary - faire de cette 

                .container {
              width:50px;
              height:80px;
              border:1px solid black;
              margin-right: -1px;
              margin-bottom: -1px;
              }

    le chevauchement de la méthode que j'ai mentionnées, travail

    Ce qui fonctionne, mais la bordure gauche sur dire un div sans un regard, il est inexistant. lien
    qu'ils vont avoir besoin de différentes classes , comme la "boîte" (sans frontière), puis une autre classe appelée "dernière" , de sorte que quand il est à la fin , et vous avez besoin d'une bordure de droite , puis class="box"dernier"
    Si vous avez entendu parler de jQuery Maçonnerie (je n'ai pas avant aujourd'hui), il utilise les divs, pas li, donc ça ne fonctionne pas non plus. Et il lieux des divs dans un semi-aléatoire, de sorte qu'il aurait besoin de JS, je crois.
    Techniquement, vous pourriez position absolue et réellement mis à l'1px sur le dessus de l'autre div - mais la façon dont je l'ai mentionné, c'est vraiment les meilleures pratiques
    vous pouvez ajouter margin: 5px; si vous souhaitez un peu d'espace entre eux , et li et des div à l'utilisation des classes exactement de la même manière

    OriginalL'auteur Scott Selby

  2. 2

    Combinant les bordures et les marges (même avec border-box) est difficile parce que votre mise en page dépend de la largeur du conteneur. Il est préférable d'ajouter un enfant à l'élément positionné par la Maçonnerie et le style que...

    .container .post {
   float: left;
   width: 240px;
}

.container .text {
    outline: 1px solid #999;
    padding: 10px;
    margin: 0 1px 1px 0;
}

    outline permet à la bordure de "l'extérieur" de la div qui les rend plus faciles à se chevaucher

    http://jsfiddle.net/4xmUY/

    (si vous utilisez cette réponse, veuillez accepter Scott répondre comme cela devrait être un commentaire sur sa réponse, mais l'explication ne tient pas là).

    Qui fonctionne presque parfaitement. La mise en page a seulement 3 colonnes au lieu de 4, si.
    Vous pouvez remonter votre conteneur largeur ~964px ou d'utiliser ma mise à jour de la réponse (ajouter un élément enfant). La solution plus robuste est mon jour de réponse.

    OriginalL'auteur methodofaction