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

代码段

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

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

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

4 个答案: