提问者:小点点

为什么图片不在文字旁边插槽


我想让图片插槽的权利与标题和信息侧边栏,但它不会去那里,即使我改变它的维度到适当的。 我建议将代码复制到您自己的编辑器中,因为它不能很好地通过堆栈溢出显示出来。

null

.featured-more-info {
  background-color: white;
  display: inline-block;
  margin-left: 300px;
  margin-right: 1200px;
  margin-top: 0px;
  font-size: 1.5rem;
  padding-top: 15px;
  padding-left: 10px;
  padding-right:10px;
  padding-bottom: 15px;
}

#flavors {
  color: #3c1c64;
}

.featured-header {
  font-size: 2rem !important;
  margin-top: 50px;
  margin-left: 300px;
  margin-right: 300px;
  padding-top: 15px;
  padding-bottom: 015px;
  padding-left: 10px;
  padding-right: 10px;
  color: #3c1c64;
  display: inline-block;
  background-color: white;
}

.product-picture2 {
  float: right;

}
<div class="featured-products">
        <h2 class="featured-header"><strong>Try our newest creation, the Quarantine Cookie Pack with our most famous
                flavors!</strong></h2>
        <h4 class="featured-more-info">The Quarantine Cookie Pack is made out of our 4 most popular flavors:<span
                id="flavors"><br> Chocolate Chip, <br> Fudge, <br> The Americano Cookie, <br> and The Fudge Americano
                Cookie</span></h4>
        <div class="product-picture2">
            <img src="https://i.stack.imgur.com/oeQxy.jpg" alt="Picture of the 4 cookies included" style="width: 860px; height: 230px;">
        </div>
    </div>

null


共2个答案

匿名用户

不确定您想要怎样使用它,但这里有一个使用display Flex的示例。 我改变了一些你必须定位元素的边距,不是真的做得正确。

我在这里要做的是添加一个容器来包装标题。 然后我给了父包装器display flex,差不多就是这样。 阅读更多关于flex的信息,它将使您受益匪浅。

null

.featured-more-info {
  background-color: white;
  margin-top: 0px;
  font-size: 1.5rem;
  padding-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 15px;
}

#flavors {
  color: #3c1c64;
}

.featured-products {
  display: flex;
  align-items: center;
}

.featured-header {
  font-size: 2rem !important;
  margin-top: 50px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
  color: #3c1c64;
  display: inline-block;
  background-color: white;
}

.product-picture {
  flex-shrink: 0;
  width: 560px;
}
<div class="featured-products">
  <div class="featured-content">
    <h2 class="featured-header">
      <strong>Try our newest creation, the Quarantine Cookie Pack with our most famous flavors!</strong>
    </h2>

    <h4 class="featured-more-info">The Quarantine Cookie Pack is made out of our 4 most popular flavors:
      <span id="flavors"><br> Chocolate Chip, <br> Fudge, <br> The Americano Cookie, <br> and The Fudge Americano Cookie</span>
    </h4>
  </div>

  <img src="https://source.unsplash.com/random" alt="Picture of the 4 cookies included" class="product-picture">
</div>

匿名用户

您的问题是Margin-Right。 虽然不是h4宽度的一部分,但它确实影响了它的框大小。 因为您没有设置显式宽度,所以只需删除属性就不会执行任何操作。 您要做的是设置一个宽度并删除边距-右:

null

.featured-more-info {
  background-color: white;
  display: inline-block;
  margin-left: 300px;
  /* margin-right: 1200px; */
  margin-top: 0px;
  font-size: 1.5rem;
  padding-top: 15px;
  padding-left: 10px;
  padding-right:10px;
  padding-bottom: 15px;
  width: 384px;
}

#flavors {
  color: #3c1c64;
}

.featured-header {
  font-size: 2rem !important;
  margin-top: 50px;
  margin-left: 300px;
  margin-right: 300px;
  padding-top: 15px;
  padding-bottom: 015px;
  padding-left: 10px;
  padding-right: 10px;
  color: #3c1c64;
  display: inline-block;
  background-color: white;
}

.product-picture2 {
  float: right;

}
<div class="featured-products">
        <h2 class="featured-header"><strong>Try our newest creation, the Quarantine Cookie Pack with our most famous
                flavors!</strong></h2>
        <h4 class="featured-more-info">The Quarantine Cookie Pack is made out of our 4 most popular flavors:<span
                id="flavors"><br> Chocolate Chip, <br> Fudge, <br> The Americano Cookie, <br> and The Fudge Americano
                Cookie</span></h4>
        <div class="product-picture2">
            <img src="https://i.stack.imgur.com/oeQxy.jpg" alt="Picture of the 4 cookies included" style="width: 860px; height: 230px;">
        </div>
    </div>