Почему «float:right» действует по-разному в этих двух подходах?

Извините, если заголовок плохой, не знаю, что сказать...

Хорошо. Мой вопрос прост, но сбил меня с толку, потому что я не понимаю, как это работает.

Я использую bootstrap 3 и вот часть HTML:

<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>

Хорошо, теперь я хочу сделать список справа налево.

Вот первый подход: Я добавляю класс 'шопитем' в Shop_Item_01.

.shopitem{
   float:right;
}

И это работает нормально.

Второй подход: Я добавляю класс 'список магазинов' в Shop_Row.

.shoplist div{
    float:right;
}

И теперь это работает, но влияет на всех участников Shop_Item_01.

Почему это происходит ? есть ли способ избежать этого во втором подходе?

Если вы собираетесь что-то плавать, это нужно позиционировать. Я бы начал с этого, но вы также можете использовать для этого Flexbox.

Chris 13.07.2019 20:55

@Chris Я знаю, я хочу знать, почему он действует по-разному, когда я указываю на один и тот же div в css?

user11472260 13.07.2019 21:23
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
59
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Код:

.shoplist div{ float:right; }

означает, что он влияет на все элементы div под ним, а не только на .shoplist Прочтите это для получения дополнительной информации.

Кстати, bootstrap 3 предоставляет класс для плавания.

Избежать этого невозможно, потому что так работает CSS, это фундаментальный дизайн языка. Чем лучше вы укажете, какие элементы вы хотите настроить, тем более узким будет его эффект.

В моем примере ниже мы хотим применить стиль только к классу .child. CSS делает именно то, что мы говорим. И элемент обертки <p> без класса не предназначен.

Но в примере 2 мы выбираем более широкое .parent-2 p теперь, ВСЕ <p> становятся целевыми.

Если вы хотите, чтобы этого не произошло, я бы сказал, нацельтесь только на те элементы, которые вы хотите изменить. С правильной структурой класса.

.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;
}
<!-- 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>
Ответ принят как подходящий

CSS автоматически добавляет стиль ко всем потомкам, если вы используете селектор потомков (пробел):

.shoplist div {
    float:right;
}

Чтобы предотвратить это, вы можете использовать дочерний селектор >:

.shoplist > div {
    float:right;
}

Другие вопросы по теме