不能使三個div與背景圖像響應

我有三個包含背景圖像的div（background-image: url()），但我在使它們響應（使用引導程序）並在它們之間放置空間時遇到問題。我嘗試了一些東西，如寬度：100％和邊距：0自動但添加邊距屬性有點刪除邊距和圖像之間的距離損失，如果使用邊距而填充當然不起作用。也因爲某些原因，我不能將寬度添加到圖像只有高度。不能使三個div與背景圖像響應

http://codepen.io/skullscream-1471533661/full/jAooJB

我平時google一下，但是這已經讓我很沮喪，我甚至不能想到什麼就谷歌。

來源

2016-08-24 Aiden P

Flexbox非常適合使這種事情變得簡單。 Here is a great resource for flexbox to learn from.

在這裏，我已經給父母「display：flex」讓孩子們彈性元素。我已經讓孩子們有32％的差距（留下1％的差距）。我已將父級設置爲「justify-content：space-between」，以告訴flex元素在每個項目之間留出空間。

在移動設備上我已經給家長：讓他們跨越設備的整個寬度「柔性包裝包裝」，因此，如果他們太寬，他們將下降到下一行，和孩子100％的寬度。

此外，爲了使背景圖像與流體盒正常工作，我給了他們「背景大小：包含」和「背景位置：中心」。理想情況下，爲他們使用實際的圖像標籤會更好。

請注意，Flexbox的目前還沒有完整的瀏覽器支持(but it's still pretty good)，和你需要add vendor prefixes as necessary.

.projects { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.projects > div { 
 
    flex: 0 1 32%; 
 
    background-size: contain; 
 
    background-position: center center; 
 
} 
 

 
@media screen and (max-width: 760px) { 
 
    .projects { 
 
    flex-wrap: wrap; 
 
    } 
 
    .projects > div { 
 
    flex: 0 1 100%; 
 
    margin-bottom: 20px; 
 
    } 
 
}

來源

2016-08-24 01:18:27 Keish

這個適用於中型屏幕（760px），但不適用於大屏幕。在較大的人看起來很舒服。 http://i.imgur.com/h6OLNdh.png –

有兩個步驟來實現： 1.更改你的父母div的風格如下：

#my-projects-section { 
    background-color: black; 
    height: 500px; 
    width:100%; 
}

2.添加th是你的孩子風格：

#image-one, 
#image-two, 
#image-three { 
    width: 30%; 
    margin: 1.66%; 
    height: 200px; 
    background-size: cover; 
    background-repeat: no-repeat; 
    transition: .2s ease-out, .2s ease-in; 
}

http://codepen.io/westefan/pen/Lkoooq

目前這個定義是靜態的，如果你想一個新的項目加入到部分，您必須修改CSS。還有一些選項可以計算利潤率，但目前還不支持：https://developer.mozilla.org/en/docs/Web/CSS/calc 另一種選擇是使用Javascript計算childelements，並根據孩子的數量創建完全動態的樣式。

來源

2016-08-24 01:19:41

不幸的是我需要添加更多的兩個部分。 –

此外，你應該驗證你的電子郵件，以便在codepen上啓用全部視圖:) –

感謝您在codepen上的提示，當您添加兩個額外的部分時，您只需調整我的文章中指出的寬度和邊距百分比。 –

不能使三個div與背景圖像響應

回答

相關問題