爲什麼這些div彼此相鄰？

我有我的頁面設置這樣爲什麼這些div彼此相鄰？

<div id="form"> 
<textarea id="p-details"></textarea> 
<div id="price-holder"><span id="price">$99</span></div> 
</div>

我有我的CSS設置這樣

#p-details { 
border: 2px solid black; 
border-radius: 2px; 
width: 500px; 
height: 300px; 
display: inline-block; 
} 

#form { 
margin: auto; 
width: 708px; 
} 

#price-holder { 
display: inline-block; 
width: 200px; 
height: 300px; 
} 

#price { 
font-weight: bold; 
font-size: 20px; 
text-align: center; 
display: block; 
}

問題是我無法弄清楚如何獲得＃對細節和＃價格持有人在#form裏面直接並排。一些幫助，將不勝感激。

來源

2013-05-27 user2259723

Div是一個塊元素。請嘗試以下方法

<div style='display:inline-block'>Some text</div><div style='display:inline-block'>Some text</div>

順便說一句。跨度是內聯元素。它劑量保持它周圍的空間。見here。

來源

2013-05-27 00:38:30 WhyMe

「並排」是一個相當相對的術語，但如果我正確理解你的問題，你可以使用這樣簡單的浮動。

#p-details { 
    float:left; 
    display:block; 
    border: 2px solid black; 
    border-radius: 2px; 
    width: 500px; 
    height: 300px; 
} 

#form { 
    margin: auto; 
    width: 708px; 
    overflow:hidden; 
} 

#price-holder { 
    float:left; 
    width: 200px; 
    height: 300px; 
} 

#price { 
    font-weight: bold; 
    font-size: 20px; 
    text-align: center; 
    display: block; 
}

如果你想保留這兩個容器，你可以保留現有的塊，只需使用#form下重新定義對準他們對你inline-block的定位。

#form { 
    margin: auto; 
    width: 708px; 
    text-align:left; 
}

來源

2013-05-27 00:39:46 brezanac

漂浮這裏將是矯枉過正。 :) – WhyMe

「矯枉過正」也是一個相對術語。 – brezanac

inline-block在我的書中已經足夠了。看到我的答案。但我同意這會起作用。 – WhyMe

當您製作元素內嵌塊時，邊上會有4px的邊距。因此，這兩個元素的組合寬度加上4px頁邊距以及＃p-details上的邊框大於708px。我相信你沒有考慮到由邊界創建的額外的4px寬度。

試着改變你的樣式表如下：

#p-details, #price-holder { 
display: inline-block; 
height: 300px; 
} 

#p-details { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
border: 2px solid black; 
border-radius: 2px; 
width: 500px; 
} 

#form { 
margin: auto; 
width: 708px; 
} 

#price-holder { 
width: 200px; 
} 

#price { 
font-weight: bold; 
font-size: 20px; 
text-align: center; 
display: block; 
}

來源

2013-05-27 00:43:08

額外的邊距不是4個像素，而是'當前活動字體中單個空間的寬度'。被內聯聲明的元素使得它們之間的空白，摺疊爲一個空格，創建一個小的空白。 –

但是，目前，在父元素設置爲-4px的情況下，使用-4px的邊距或字間距來解決這個問題就足夠了，不是嗎？ –

它適用於大多數普通屏幕尺寸的字體，但是當您將其應用於具有更大（或更小）字體的容器中時，會立即斷開，從而導致空間變爲3或5像素而不是4.更持久的解決方案對於這個問題使用絕對定位或浮動很遺憾。 –

你可以試試這個，DEMO.

#p-details { 
    border: 2px solid black; 
    border-radius: 2px; 
    width: 500px; 
    height: 300px; 
    display: inline-block; 
    float:left; 
} 

#form { 
    margin: auto; 
    width: 715px; 
} 

#price-holder { 
    display: inline-block; 
    width: 200px; 
    height: 300px; 
    float:left; 
} 

#price { 
    font-weight: bold; 
    font-size: 20px; 
    text-align: center; 
    display: block; 
}

來源

2013-05-27 00:44:04

爲什麼這些div彼此相鄰？

回答

相關問題