Question

我试图用CSS和HTML做一些似乎不适合我的事情。这是我的CSS和HTML：

#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＆＃39; wikicontent＆＃39;与文本重叠，防止显示。有没有办法设置边框，以防止重叠？

以下是发生了什么的示例：http://prntscr.com/6q1p9m

感谢您的帮助。

Answer 1

哟！

你去了：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;
}

非常希望它可以帮助您解决问题。

Div的CSS重叠问题

1 个答案: