我想让图片插槽的权利与标题和信息侧边栏,但它不会去那里,即使我改变它的维度到适当的。 我建议将代码复制到您自己的编辑器中,因为它不能很好地通过堆栈溢出显示出来。
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
不确定您想要怎样使用它,但这里有一个使用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>