Aligner des boîtes d'angle arrondies l'une à côté de l'autre

J'ai créé deux boîtes d'angle arrondies que j'aimerais aligner les unes à côté des autres. Mais la deuxième boîte apparaît directement en dessous de la première en utilisant float: left on the 1er. Tout moyen de résoudre ce problème serait vraiment utile. Voici le html et le CSS.Aligner des boîtes d'angle arrondies l'une à côté de l'autre

Le code HTML:

<html> 
    <head> 
     <title>Homepage</title> 
     <link rel="stylesheet" href="layout.css"/> 
    </head> 

    <body> 

     <div id="containerDiv"> 

        <!-- Box 1 --> 

      <div id="box1" class="boxDiv"> 
       <div class="upperRound"></div> 
       <div class="boxTagLine"> 
         Some Tag Line 
       </div> 
       <div class="boxContent"> 
        Heres some content 
       </div> 
       <div class="lowerRound"></div> 
      </div> 

      <!-- Box 2 --> 

      <div id="box2" class="boxDiv"> 
       <div class="upperRound"></div> 
       <div class="boxTagLine"> 
         Some Tag Line 
       </div> 
       <div class="boxContent"> 
        Heres some content 
       </div> 
       <div class="lowerRound"></div> 
      </div> 

     </div> 


    </body> 
</html>

Le CSS:

#containerDiv { 
    width: 1000px; 

} 
.boxDiv { 
    width: 248px; 
} 
.upperRound { 
    background-image: url('rounded_upper.gif'); 
    height: 20px; 
} 

.lowerRound { 
    background-image: url('rounded_lower.gif'); 
    height: 20px; 
} 

.boxContent,.boxTagLine { 
    border-left: 2px solid #B5B5B5; 
    border-right: 2px solid #B5B5B5; 
    padding: 10px; 
    background-color:#F8F8F8; 
    solid #B5B5B5; 

} 

.boxTagLine { 
    color:#0066FF; 
} 

#box1 { 
    float:left; 
}

Source

2009-11-17 JoeRP

Connaissez-vous la '-moz-border-radius' et d'autres options de disponible en CSS pour arrondir facilement les correcteurs? Ils sont disponibles dans la plupart des navigateurs décents (donc pas de support IE) https://developer.mozilla.org/En/CSS_Reference/Mozilla_Extensions –

deuxième div doit flotter à l'élément à droite et à côté devrait dégager float. Je vais ajouter plus d'informations dans une seconde.

J'avais un peu tort. Vous n'avez même pas besoin de compensation div.

Consultez ce question.

Ainsi - dans votre cas, ajoutez ceci à css =>

#box2 { 
    float:right; 
} 

#containerDiv { 
    width: 1000px; 
    overflow: hidden; 
}

Je n'ai pas essayé, mais cela devrait fonctionner.

L'approche de la mine laissera de l'espace entre les boîtes. Donc - il pourrait ne pas être l'effet désiré.

Source

2009-11-17 09:17:54

Vous seriez mieux d'utiliser des portées

Mais si vous devez utiliser divs:

.boxDiv { 
    width: 248px; 
    display: inline; 
}

Source

2009-11-17 09:20:09

Encore meilleure approche, si cela fonctionne. :) –

float les deux cases à gauche:

#box1,#box2 { 
    float:left; 
}

Source

2009-11-17 09:23:36 Paul

Vous seriez mieux flotter votre .boxDiv gauche, comme ceci:

.boxDiv { 
    width: 248px; 
    float: left; 
}

De cette façon, si vous ajoutez plus de boîtes ils flottent tout de suite, sinon vous auriez ajouter les noms de classes spécifiques:

#box1, #box2, #box3, #box4 { 
    float:left; 
}

Source

2009-11-17 16:32:36

Aligner des boîtes d'angle arrondies l'une à côté de l'autre

Répondre

Questions connexes