web-dev-qa-db-fra.com

Définir un espace entre divs

J'ai deux divs comme ça:

<section id="main">
        <div id="left">
            <asp:ContentPlaceHolder ID="left" runat="server" />
        </div>
        <div id="right">
            <asp:ContentPlaceHolder ID="right" runat="server" />
        </div>
</section>

Et voici mon css:

#left
{
    float: left;
    margin-right: 17px;

}

#right
{
    float: right;
}

Je veux que l'espace entre les divs soit 40px. J'ai essayé d'ajouter du rembourrage, de la marge et de la largeur dans mes css, mais je pense que cela n'a pas réglé le rembourrage pour corriger 40 pixels. Comment faire?

cssasp.net-mvc
17
petko_stankoski

Flottez-les de la même manière et ajoutez une marge de 40 pixels. Si vous avez 2 éléments flottant dans des directions opposées, vous aurez beaucoup moins de contrôle et l'élément conteneur déterminera à quelle distance ils se trouvent.

#left{
    float: left;
    margin-right: 40px;
}
#right{
   float: left;
}
24
benni_mac_b

Pour les personnes recherchant une solution pour définir l'espacement entre N divs, voici une autre approche utilisant des pseudo-sélecteurs:

div:not(:last-child) {
  margin-right: 40px;
}

Vous pouvez également combiner des pseudo sélecteurs enfants:

div:not(:first-child):not(:last-child) {
  margin-left: 20px;
  margin-right: 20px;
}
27
David Salamon

Vous avez besoin d'une gouttière entre deux div. La gouttière peut être faite comme suit

marge (gouttière) = largeur - taille de la gouttière E.g marge = calc (70% - 2em)

<body bgcolor="gray">
<section id="main">
        <div id="left">
            Something here     
        </div>
        <div id="right">
                Someone there
        </div>
</section>
</body>
<style>
body{
    font-size: 10px;
}

#main div{
    float: left;
    background-color:#ffffff;
    width: calc(50% - 1.5em);
    margin-left: 1.5em;
}
</style>
0
zawhtut