浮动图像与文字; CSS未应用

Question

我正在尝试构建我的Web应用程序并使用bootstrap模板。在其中一个页面中，我必须提供带有文本的内嵌图像，图像应该向左浮动，文本向右移动。

html中的段落元素是div的一部分。我查找并找到了建议在父div的CSS规则中添加img属性的链接。这是我试图添加图像的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') }}>

你能解释一下这是什么问题吗？也许我没有在正确的父CSS规则下添加img CSS规则。我是新手，所以任何帮助将不胜感激。

Answer 1

问题在于代码row>img。在CSS中，符号>查找来自父级的直接子级。根据你的代码，img不是直接的孩子。这是一个盛大的孩子。所以改变你的代码

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

至

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

更新：

根据您在下面的评论，您提到这不起作用。是的，您必须在此处应用所有剩余的样式，因为您已添加如下所示的内嵌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>

Answer 2

因为.row>img选择器仅在img作为DOM树结构中row容器的直接子项存在时才有效。要解决此问题，您应该采用如下通用方法：

.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') }}>

Answer 3

要正确地将CSS应用于图像，请将CSS规则更改为：

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

你的规则不起作用，因为img标签不是.row元素的直接子元素。

Answer 4

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

改变这个

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

我希望它会对你有所帮助。