La séparation de deux divs avec CSS

Dire que j'ai deux divs A et B, qui sont actuellement alignées côte à côte. Comment puis-je obtenir Un être séparé de B par 50px, tout en laissant Un pour s'élever jusqu'à 70% de l'espace restant et B les 30% restants?

EDIT: Accepté la réponse un peu au début, avant que je l'ai fait essayé. Oups.

JSFiddles:

Un Conte de Deux Divs

Maintenant séparés, mais maintenant, avec le second sur une deuxième ligne?

en laissant toujours Un pour s'élever jusqu'à 70%... si vous avez déjà deux divs avec 70% et 30%.. pourquoi ne pas les montrer - code ou un violon ?
vous voulez garder les divs taille et d'ajouter 50px marge d'entre eux? Je vous agrandir le taille de la page ou de réduire la largeur d'un div.
l'utilisation de certains percetange au lieu de 50px, par exemple divA:67% de marge:5% divB:28%
Heh, car je pensais qu'il serait assez simple. div.A {width:70%;} div.B {width:30%;} serait, non?

OriginalL'auteur wrongusername | 2011-09-23

3

Je crois que votre réponse sélectionnée ne fonctionnera pas:

http://jsfiddle.net/cNsXh/

edit:

Désolé, l'exemple ci-dessus n'a pas été correct au premier abord. Maintenant c'est fait.

/modifier

Comme vous pouvez le voir, div #b va se déplacer sous div #a parce que margin-left (ou padding-left) sera ajouté à la 30%. Et parce que nous sommes mélange de pourcentage avec les valeurs de pixels, ici, nous ne serons pas en mesure de définir les valeurs qui seront la garantie d'ajouter toujours exactement à 100%.

Vous aurez besoin d'utiliser un wrapper pour div #b qui aura 30% largeur, et non pas de définir une largeur pour div #b, mais de définir margin-left. Parce qu'un div est un élément de bloc il va automatiquement remplir l'espace restant à l'intérieur de la div wrapper:

http://jsfiddle.net/k7LRz/

Cela vous permettra de contourner le CSS < 3 de la boîte-modèle de caractéristiques qui curieusement a été définie de manière à ce que la définition d'une dimension (largeur /hauteur) de ne PAS soustraire les marges et/ou remplissages et/ou border-width.

Je crois CSS 3 de la boîte-modèle permettra d'offrir des options plus souples ici. Mais, certes, je ne suis pas encore sûr à propos de la croix-navigateur prenant en charge ces nouvelles fonctionnalités.

Vous avez raison, haha, j'ai accepté avant même d'avoir essayé.
aussi garder à l'esprit que border-width est également ajoutée le pourcentage de largeurs. C'est vraiment une particularité gênante de CSS < 3.
Une autre question: rembourrage semble épave trop? jsfiddle.net/Rt5dF
même principe, vous aurez besoin d'utiliser un élément wrapper pour div #a alors aussi bien avec width 70% et le fossé de la width pour div #a.
Vous êtes les bienvenus. Et ouais: bienvenue sur le CSS < 3 de la boîte-modèle. 🙁 La partie sur elle suce vraiment malheureusement.

OriginalL'auteur Decent Dabbler

Essayer de résoudre votre problème.

<html>
<head>
    <style type="text/css">
        #Content
        {
            border: 3px solid blue;
            position: relative;
            height: 300px;
        }

        #divA
        {
            border: 3px solid red;
            position: absolute;
            margin-right: 25px;
            left: 5px;
            top: 5px;
            bottom: 5px;
            right: 70%;
        }

        #divB
        {
            border: 3px solid green;
            position: absolute;
            right: 5px;
            top: 5px;
            bottom: 5px;
            left: 30%;
            margin-left: 25px;
        }
    </style>
</head>
<body>
    <div id="Content">
        <div id="divA">
        </div>
        <div id="divB">
        </div>
    </div>
</body>
</html>

+1 C'est sacrément intelligent.

OriginalL'auteur Utkarsh Panwar

3

il suffit de régler la marge gauche ou padding-left de div B

margin-left sera mieux, c'est de la CSS ont de l'ombre ou de la frontière
Ah, une solution aussi simple! Merci!!!!
Oh, attendez, je ne peux pas le faire fonctionner 🙁 mise à Jour de question!

OriginalL'auteur zhongshu
2

@wrongusername; je sais que vous acceptiez de répondre, mais vous pouvez vérifier cette solution aussi bien dans ce que vous n'avez pas besoin de donner plus de mark-up & si vous donnez padding à votre div c'est de ne pas affecter la structure.

VÉRIFIER CET EXEMPLE: http://jsfiddle.net/sandeep/k7LRz/3/

OriginalL'auteur sandeep
1

http://jsfiddle.net/efortis/HJDWM/
```
#divA{ 
    width: 69%;  
}
#divB{ 
    width: 29%; 
    margin-left: 2%;
}
```
Désolé Eric, mais je voulais un jeu de distance entre les deux divs 🙂
Gardez à l'esprit que les dispositions fluides vous devez sacrifier au moins une dimension. 100% + 50px ne convient pas, alors vous feriez mieux d'aller avec espacement proportionnel comme indiqué, ou comme @fireeyedboy utilisation suggérée 30% - 50px pour la dernière colonne.

OriginalL'auteur Eric Fortis

Vous devez vous connecter pour publier un commentaire.