DIV CSS en utilisant des pourcentages

Question

alors je suis ce violon: http://jsfiddle.net/69WVx/3/

Je joins également le code. Fondamentalement, je veux que test2 et test3 soient en ligne les uns avec les autres. Je veux aussi que les largeurs de test2 et test3 soient de%, comme pour un bouton responsive mobile.

Est-ce que cela peut être fait comme je le fais? Ou est-ce que je baise tout ça?

Comme vous pouvez le voir, les test2 et test3 de DIV s'affaissent l'un sur l'autre, et non en ligne.

HTML:

<div class="test"> 
    <div class="test1"> 
     <div class="test2">ORANGE</div> 
     <div class="test3">APPLE</div> 
    </div> 
</div> 

CSS:

.test { 
    position: relative; 
    width: 300px; 
    height: 100px; 
    border: 1px solid #FF0000; 
} 
.test1 { 
    width: 90%; 
    height: 50%; 
    border: 1px solid; 
    position: relative; 
} 
.test2 { 
    width: 40%; 
    border: 1px solid #00FF00; 
    display: inline; 
    position: absolute; 
} 
.test3 { 
    width: 40%; 
    border: 1px solid; 
    display: inline; 
    position: absolute; 
} 

Answer 1

Essayez quelque chose comme ça, mon mieux pour vous aider.

Je ne sais pas si c'est ce que vous voulez. Fiddle

Si vous voulez garder la position absolue procédez comme suit

.test2 { 
    width: 40%; 
    border: 1px solid #00FF00; 
    display: inline-block; 
    position :absolute; 
} 
.test3 { 
    width: 40%; 
    border: 1px solid; 
    display: inline-block; 
    position :absolute; 
    margin-left:40%; 
    } 

Ou Même cela fera

.test2 { 
    width: 40%; 
    border: 1px solid #00FF00; 
    display: inline-block; 
} 
.test3 { 
    width: 40%; 
    border: 1px solid; 
    display: inline-block; 

}

Answer 2

Les position:absolute propriétés dans votre CSS étaient à l'origine à la fois .test2 et .test3 pour afficher les uns sur les autres. Supprimer cette propriété des deux éléments fournit l'apparence en ligne que vous recherchez.

Aussi, en tant que Jc. les points ci-après, les propriétés display doivent être mis à inline-block au lieu de inline

.test2 { 
    width: 60%; 
    border: 1px solid #00FF00; 
    display: inline-block; 
} 
.test3 { 
    width: 30%; 
    border: 1px solid; 
    display: inline-block; 
} 

http://jsfiddle.net/69WVx/11/

Answer 3

Appliquer display: inline-block; pour les blocs internes tels que .test2 et .test3, de sorte que vous pouvez obtenir ce ..

Cocher cette Fiddle ...

CSS:

.test { 
    position: relative; 
    width: 300px; 
    height: 100px; 
    border: 1px solid #FF0000; 
} 
.test1 { 
    width: 90%; 
    height: 50%; 
    border: 1px solid; 
    position: relative; 
} 
.test2 { 
    width: 40%; 
    border: 1px solid #00FF00; 
    display: inline-block; 
} 
.test3 { 
    width: 40%; 
    border: 1px solid; 
    display: inline-block; 
} 

Answer 4

Essayez ceci:

Demo

Votre erreur est:

1.You laisser .test2 & .test3 position: absolute, cela va les amener à être supprimés du flux normal.Si vous ne définissez pas le haut, la gauche, la droite, le bas des éléments, ils se couvriront bien sûr. Cependant, vous n'avez pas besoin d'utiliser "position" ici.

2.Div doit être affiché en ligne-bloc. Les éléments en ligne n'ont pas ont des propriétés de largeur ou de hauteur.Alors vous pouvez voir si vous laissez les divs width:40%, cela ne fonctionne pas. Laissez-les display:inline-block;

Answer 5

Eh bien voici ce que j'ai essayé je suppose que c'est ce que tu veux ...

HTML:

<div class="test"> 
    <div class="test1"> 
     <div class="test2">ORANGE</div> 
     <div class="test3">APPLE</div> 
    </div> 
</div> 

CSS:

.test { 
    position: relative; 
    width: 300px; 
    height: 100px; 
    border: 1px solid #FF0000; 
} 
.test1 { 
    width: 90%; 
    height: 50%; 
    border: 1px solid; 
    position: relative; 
} 
.test2 { 
    width: 40%; 
    border: 1px solid #00FF00; 
    display: inline-block; 
    position: relative; 
} 
.test3 { 
    width: 40%; 
    border: 1px solid; 
    display: inline-block; 
    position: relative; 
} 

est le violon ici - --->DEMO

Eh bien, la raison pour laquelle il se chevauchait était parce que vous l'avez positionné en absolu ...... soit donner un positionnement relatif ou fournir le positionnement pour une disposition absolue afin d'obtenir ce que vous vouliez ....