如何在已经漂浮的情况下使用填充权？

我有两个图像在左边缘和右边缘之一。我想把两个元素集中起来，让他们在中间相遇。如何在已经漂浮的情况下使用填充权？

但是因为我右边的那个盒子是右对齐到左边的，所以我的填充右边不能用来推动它。

这里是我的代码：

<section id="content1"> 
    <a href="#"><img src="images/matcha.jpg" alt="pic1" width="300" height="300" /></a> 

    <div class="box1"> 
    <div class="heading1"> 
     <p>GREEN TEA LOVE</p> 
    </div> 

    <div class="paragraph1"> 
     <p>Top Impression Bakery Cafe has been on my go-to list for awhile since I saw their 
     Green Tea Croissant on Instagram. If you know me well you would know that I'm a huge 
     fan of anything Matcha and if anything is Matcha related I've got to try it!</p> 
    </div> 
    </div> 
</section>

CSS：

#content1{ 
    padding-top:50px; 
    padding-bottom:30px; 
    width: 960px; 
} 

.box1{ 
    width:500px; 
    height:300px; 
    background:-moz-linear-gradient(top, #77ebcf 20%, #ffffff 20%); 
    border-style:solid; 
    float:right; 
}

来源

2017-05-25 jen2nv

我只看到一个图像和''标签不应该有一个结束斜杠。 – Rob

我不知道为什么你需要浮动右边框“将其调整到左边一”。您可以使用图像上的vertical-align使它们垂直对齐。为了让他们居中，你只需要添加text-align: center到#content1。见https://jsfiddle.net/8gkcguwb/1/。

来源

2017-05-25 13:13:59 sorayadragon

如果您希望它们在页面中间对齐，请从'＃content1'中删除宽度。 – Arthur

如果您需要它为特定宽度，您还可以将'margin：auto'添加到'＃content1'。 – sorayadragon

啊谢谢你抽空解释，还是习惯了吧！ – jen2nv

您是否尝试过两个元素#content和.box1至

margin 0 auto;

来源

2017-05-25 13:15:37

在您的父内容部分标记上使用flexbox，删除框上的浮动。您可以将justify-content规则更改为空格分隔，以便可以根据父级的宽度进行分配，也可以在窗口调整大小时进行Flex自动换行。

#content1{ 
 
    padding-top:50px; 
 
    padding-bottom:30px; 
 
    width: 100%; 
 
    max-width: 960px; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 
.box1{ 
 
    width:500px; 
 
    height:300px; 
 
    background:-moz-linear-gradient(top, #77ebcf 20%, #ffffff 20%); 
 
    border-style:solid; 
 
    
 
}

<section id="content1"> 
 
    <a href="#"><img src="https://placehold.it/300x300" alt="pic1" width="300" height="300" /></a> 
 

 
    <div class="box1"> 
 
    <div class="heading1"> 
 
     <p>GREEN TEA LOVE</p> 
 
    </div> 
 

 
    <div class="paragraph1"> 
 
     <p>Top Impression Bakery Cafe has been on my go-to list for awhile since I saw their 
 
     Green Tea Croissant on Instagram. If you know me well you would know that I'm a huge 
 
     fan of anything Matcha and if anything is Matcha related I've got to try it!</p> 
 
    </div> 
 
    </div> 
 
</section>

Fiddle

来源

2017-05-25 13:24:42

如何在已经漂浮的情况下使用填充权？

回答

相关问题