0
votes

Pourquoi «float: right» agit différemment dans ces deux approches?

Désolé si le titre est mauvais, je ne sais pas quoi dire ...

Ok Ma question est simple mais m'a rendu confus car je ne comprends pas comment cela fonctionne.

I J'utilise bootstrap 3 et voici la partie HTML:

.shoplist div{
    float:right;
}

OK maintenant, je veux faire l'ordre de la liste de droite à gauche.

Voici la première approche: J'ajoute une classe 'shopitem' à Shop_Item_01.

.shopitem{
   float:right;
}

Et ça marche bien.

Deuxième approche: j'ajoute une classe 'shoplist' à Shop_Row.

<div id="Shop_Row" class="row" >

     <!--  Shop Item Start-->
       <div id="Shop_Item_01" class="col-sm-6 col-md-4">
                <div class="thumbnail" >
                    <h4 class="text-center"><span class="label label-info">Nokia</span></h4>
                    <img src="http://placehold.it/650x450&text=Lumia 1520" class="img-responsive">
                    <div class="caption">
                        <div class="row">
                            <div class="col-md-6 col-xs-6">
                                <h3>Lumia 1520</h3>
                            </div>
                            <div class="col-md-6 col-xs-6 price">
                                <h3>
                                <label>$749.00</label></h3>
                            </div>
                        </div>
                        <p>32GB, 4GB Ram, 1080HD, 6.3 inches, WP 8</p>
                        <div class="row">
                            <div class="col-md-6">
                                <a class="btn btn-primary btn-product"><span class="glyphicon glyphicon-thumbs-up"></span> Like</a> 
                            </div>
                            <div class="col-md-6">
                                <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> Buy</a></div>
                        </div>

                        <p> </p>
                    </div>
                </div>
            </div>
     <!--  Shop Item End-->

</div>

Et maintenant, cela fonctionne mais cela affecte tous les membres de Shop_Item_01.

Pourquoi cela se produit-il? y a-t-il un moyen d'éviter cela dans la deuxième approche?

html css twitter-bootstrap-3

2 commentaires

Si vous comptez faire flotter quelque chose, il doit être positionné. Je commencerais par là, mais vous pouvez également utiliser Flexbox pour cela.

@Chris Je sais, je veux savoir pourquoi il agit différemment quand je pointe vers le même div en css?

3 Réponses :

0
votes

Le code:

.shoplist div{ float:right; }

0 commentaires

0
votes

Il n'y a aucun moyen d'éviter cela, car c'est ainsi que fonctionne CSS, c'est une conception fondamentale dans le langage. Mieux vous spécifiez les éléments que vous souhaitez cibler et affectez l'étroitesse de son effet.

Dans mon exemple ci-dessous, nous voulons appliquer le style uniquement à la classe .child . CSS fait exactement ce que nous disons. Et l'élément d'encapsulation,

sans la classe n'est pas ciblé.

Mais dans l'exemple 2, nous choisissons le plus large .parent-2 p code > maintenant, TOUS les

sont ciblés.

Si vous voulez éviter que cela se produise, je dirais de ne cibler que les éléments que vous souhaitez modifier. Avec une structure de classe appropriée.

<!-- scenario 1 -->
<div class="parent">
    <h1>Title 1</h1>
  <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>
  <div class="deeper-layer">
    <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>

    <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>

</div>

<hr>

<!-- scenario 2 -->
<div class="parent-2">
  <h1>Title 2</h1>
  <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>
  <div class="deeper-layer">
    <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>

    <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>

</div>

.child {
  color: red;
  font-weight: bold;
}

.parent-2 p {
  color: green;
  font-weight: bold;
}



/* additional styling */

p {
  font-family: arial;
}

.deeper-layer {
  outline: 1px solid grey;
  padding: 10px;
}

0 commentaires

0
votes

CSS ajoute automatiquement du style à tous les descendants si vous utilisez le sélecteur descendant, (espace):

.shoplist > div {
    float:right;
}

Pour éviter cela, vous pouvez utiliser le sélecteur enfant >:

.shoplist div {
    float:right;
}

0 commentaires