CSS的重疊問題

我正在嘗試使用CSS和HTML來做某些事情，但它似乎沒有爲我工作。這是我的CSS和HTML：CSS的重疊問題

#site p { 
margin-left: -625px; 
margin-right: -400px; 
} 

#wikicontent { 
top: 331px; 
left: 144px; 
position:fixed; 
background: #E0E0E0; 
border-radius: 15px 0px 0px 15px; 
height: 100px; 
} 

#site { 
border-radius:15px 15px 15px 15px; 
background: #fff; 
width: 1075px; 
margin-left: auto; 
margin-right: auto; 
box-shadow: 0px 0px 15px 0px #000; 
padding: 2px; 
-moz-box-shadow: 0 0 15px 0px #000; 
-webkit-box-shadow: 0 0 15px 0px #000; 
} 

#site h3 { 
margin-right: 30px; 
margin-left: 30px; 
text-align: left; 
} 


<html> 
<div id="site"> 
<div id="wikicontent"> 
<h3>Testing</h3> 
</div> 
<p>This is some really long text for an example. And I'm still writing an example. This is really looooooooooooooooong. Looooooooooong. This is just an example of the text.</p> 
</div> 
</html>

問題是div'wikicontent'與文本重疊，阻止它被顯示。有沒有辦法設置邊框，以防止重疊？

這裏是發生了什麼事的例子：http://prntscr.com/6q1p9m

感謝您的幫助。

來源

2015-04-05 JugglingBob

您可以請創建一個jsfiddle，以便我們可以更快，更輕鬆地解決您的問題？ – 2015-04-05 22:34:04

你爲什麼要設置維基...被修復？ – Legends 2015-04-05 22:39:03

@Legends目前不需要，但是當div'site'變得更長，文本更多時，我需要div'wikicontent'來向下滾動。 – JugglingBob 2015-04-05 22:40:23

喲！

你去那裏：http://jsfiddle.net/Bladepianist/wxe0L4xb/

這不是響應都不過。我必須使用邊距，顯示和寬度百分比來呈現您的示例。

#site p { 
    width: 88%; 
    margin-left: 11%; 
    display: inline-block; 
} 
#wikicontent { 
    position:fixed; 
    background: #E0E0E0; 
    display: inline-block; 
    border-radius: 15px 0px 0px 15px; 
    height: 68px; 
    width: 10%; 
} 
#site { 
    border-radius:15px 15px 15px 15px; 
    background: #fff; 
    width: 1075px; 
    padding: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    box-shadow: 0px 0px 15px 0px #000; 
    -moz-box-shadow: 0 0 15px 0px #000; 
    -webkit-box-shadow: 0 0 15px 0px #000; 
} 
#site h3 { 
    margin-right: 30px; 
    margin-left: 30px; 
    text-align: left; 
}

嚴重希望它能幫助你解決你的問題。

來源

2015-04-05 22:39:47 Bladepianist

令人驚歎！謝謝Bladepianist，我很感激！ – JugglingBob 2015-04-05 22:48:27

CSS的重疊問題

回答

相關問題