爲什麼我的第二個div在同一行上忽略了margin-right？

通過回答問題後，我設法讓我的兩個div一直處於同一條線上。但現在，我的第二個div拒絕遵循父div的margin-right規則。所以我將它添加到div本身，它仍然忽略它。我認爲這是text，但它似乎並不重要。我嘗試刪除width的第二個div，這種作品，但它太集結了。基本上，我希望我的div可以與瀏覽器的size進行比例縮放，我使用的是兩個div的百分比，但是右邊的div拒絕縮小超過某個點。 overflow:hidden也似乎沒有效果。爲什麼我的第二個div在同一行上忽略了margin-right？

這是我正在嘗試製作的頁面。 project

父DIV：

.split { 
    margin: 0px 75px 15px 75px; 
    height: 300px; 
    position: relative; 
    overflow: hidden; 
}

與子div

#pow { 
    width: 50%; 
    display: inline-block; 
    margin-right: 15px; 
} 

#foundhome { 
    width: 38%; 
    display: inline-block; 
    position: absolute; 
    margin-left: 0; 
}

編輯：在我的東西又看後，好像我可能什麼地方弄錯了。雖然給出的答案在某種程度上確實起作用。我會慢慢重新添加片斷，看看我出錯的地方。

來源

2016-01-04 Locket

請在你的問題中加入一些代碼 –

我明白你想達到什麼目的，但不幸的是，你設置所有DIV的方式並不合適。這在技術上不是錯誤的，但這是一種不好的做法。設置佈局的正確方法是使用浮動。這裏有一個視頻，以幫助您更好地瞭解浮動https://www.youtube.com/watch?v=AyrQR7SxAq8 – Fahmi

我弄清楚如何讓他們在同一行之前，他們作爲花車，但我不喜歡如何他們的行爲。爲什麼不使用花車是不好的做法？我的其他divs有什麼問題？ – Locket

查看本教程中關於CSS中的Box Model。

本質上，您遇到的問題是因爲width屬性引用了元素的內容寬度。它不考慮邊距，填充或邊框，因此當您添加這些值時，您必須在設置的寬度中對此進行說明。

如果您認爲這很糟糕，並且您在設置寬度時想考慮整個箱子模型，有關於如何使用box-sizing CSS3設置的說明Here將填充和邊框作爲整體寬度的一部分包含在內，但它不適用於margin這是總是計算在元素的寬度之上（因爲它描述了元素周圍應該保持清晰的區域）。

來源

2016-01-04 10:25:09

所以，如果我有寬度的正確百分比，它將保持不變，而不管瀏覽器如何變化？我以前看過那些東西，但我不確定它做了什麼，所以我可以試試看。另外，我是如何擁有它不是一個理想的方式？使用花車真的會更好嗎？ – Locket

如果你說'width：50％'，元素的* content區*將佔用屏幕寬度的50％。元素佔用的**總面積**將爲50％+任何保證金+任何邊界+任何填充。在你的鏈接的情況下，因爲你的左右邊距是'75px'，所以總寬度將是'50％+ 150px'。 px值和％值的混合可能會導致極端情況下出現不希望的行爲（例如，考慮屏幕寬度爲300px的情況，比如說），但它只需要像您所需要的那樣靈活：不要讓它變得複雜你不需要。 –

關於「更好」，「理想」以及是否使用'float'，請參閱[This]（http://stackoverflow.com/questions/15172520/advantages-of-using-displayinline-block-vs-floatleft-在-CSS）。它總是相對的，它總是取決於你想要做什麼。 –

爲什麼我的第二個div在同一行上忽略了margin-right？

回答

相關問題