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

Элемент абзаца в html был частью div. Я посмотрел и нашел ссылки, которые предлагали добавить свойство img к правилу CSS родительского div. Это div, в котором я пытался добавить изображение

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-10 mx-auto">
      <p style='float:right;' > <img src={{ url_for('static',filename='img/ankulGupta.tiff') }}>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius praesentium recusandae illo eaque architecto error, repellendus iusto reprehenderit, doloribus, minus sunt. Numquam at quae voluptatum in officia voluptas voluptatibus, minus! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
</div>

Я добавил правило поплавка, как это

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.row>img{
  display: inline-block;
  float: left;
}

Но, несмотря на все это, я не смог применить эти правила к изображению. После долгих попыток я просто добавил правила стиля в тег img, чтобы выполнить работу.

<img style='float:left; margin-right:10px; margin-top:8.5px; width: 210px; height:194px' src={{ url_for('static',filename='img/img.jpg') }}>

Не могли бы вы объяснить, в чем была проблема? Возможно я не добавил правило img CSS под правым родительским правилом CSS. Я новичок в этом, поэтому любая помощь будет оценена.

0
IntrepidBlue 28 Фев 2018 в 09:00

4 ответа

Лучший ответ

Проблема с кодом row>img. В CSS символ > ищет прямых потомков от родителя. Согласно вашему коду img не прямые дети. Это внуки детей. Так что измени свой код

 .row>img{
   display: inline-block;
   float: left;
 }

Кому

.row img{
  display: inline-block;
  float: left;
}

< Сильный > UPDATE :

Согласно вашему комментарию ниже, вы упомянули, что это не работает. Да, вы должны применить все остальные стили здесь, так как вы добавили встроенный тег img, как показано ниже.

.row img{
   margin-right:10px; margin-top:8.5px; width: 210px; height:194px;
   float: left;
 }

Фрагмент кода

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.row img{
  margin-right:10px; margin-top:8.5px; width: 210px; height:194px;
  float: left;
}
<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-10 mx-auto">
      <p style='float:right;' > <img src='img/ankulGupta.tiff'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius praesentium recusandae illo eaque architecto error, repellendus iusto reprehenderit, doloribus, minus sunt. Numquam at quae voluptatum in officia voluptas voluptatibus, minus! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
</div>
1
Suresh Ponnukalai 28 Фев 2018 в 06:57

Потому что селектор .row>img будет работать, только если img присутствует как непосредственный дочерний элемент контейнера row в древовидной структуре DOM. Чтобы это исправить, вы должны сделать общий подход, например:

.row img {
  display: inline-block;
  float: left;
}

Или, если вы хотите конкретнее, тогда вы должны применить селектор class к изображениям.

.image-style {
  display: inline-block;
  float: left;
}

<img class="image-style" src={{ url_for('static',filename='img/img.jpg') }}>
1
Hanif 28 Фев 2018 в 06:37
.row>img{
  display: inline-block;
  float: left;
}

Изменить на это

.row img{
  display: inline-block;
  float: left;
}

Я надеюсь, что это поможет вам.

0
Ajay Yadav 28 Фев 2018 в 06:16

Чтобы правильно применить CSS к изображению, измените правило CSS следующим образом:

.row > div > p > img {                                                          
  display: inline-block;
  float: left;
}

Ваше правило не работает, потому что тег img не является прямым потомком элемента .row.

0
Matt Healy 28 Фев 2018 в 06:15