如何在已經漂浮的情況下使用填充權？

我有兩個圖像在左邊緣和右邊緣之一。我想把兩個元素集中起來，讓他們在中間相遇。如何在已經漂浮的情況下使用填充權？

但是因爲我右邊的那個盒子是右對齊到左邊的，所以我的填充右邊不能用來推動它。

這裏是我的代碼：

<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

如何在已經漂浮的情況下使用填充權？

回答

相關問題