4

这是小提琴，

我有两个divs，一个用于标题，另一个用于主体。在里面div哪个是标题，我有另一个div，那个 div 是floated left。因此，floating在这两者之间出现了一个空白divs（在标题的 div 和主体的 div 之间）。

[注：请参考#DivLogo小提琴的css部分]

我的问题是，为什么会因为浮动而引发这种问题。？

4

5 回答 5

9

这是让您的 #DivHeader 成为的工件inline-block。将其更改为display: block并设置overflow: hidden;为包含浮动。见http://jsfiddle.net/jhcUb/

于 2013-06-18T18:39:16.607 回答
4

申请

float:left;

为了#DivHeader包含它的后代

消除

position:relative;

从#DivMain

见小提琴

于 2013-06-18T18:33:22.240 回答
3

为什么使用 inline-block 的行为

您的原始 CSS 如下：

#DivHeader
{
    position:relative;
    display:inline-block;
    width:100%;
    font-family: Century Gothic, sans-serif;
    background-color:#3b5998;
}

有两个子元素#DivHeader，一个是浮动的，一个是绝对定位的，因此对 的高度没有贡献#DivHeader。

假设您已设置display: block，您会看到从页面左上角绘制的红色背景，而您将看不到标题。

这是因为您设置#DivMain为position: relative，因此您创建了一个新的堆叠上下文，该上下文被绘制在先前渲染的元素上。

如果您设置position: static为#DivMain，您将看到浮动元素的标题内容。

因此，回到#DivHeader，通过使用display: inline-block，元素现在可以识别 HTML 文档中的空白，创建一个匿名内联框，这意味着#DivHeader现在有内容。由于浮动后有空白，这意味着浮动产生的间隙有助于内联块，您会看到背景颜色等。

解决问题很容易，在DivHeader现场overflow: auto和display: block.

还有一件事，如果您没有浮动#DivLogo，您将看不到问题，因为徽标元素中较大的字体大小会移动基线，因此内联块识别的空白将无关紧要。

这里发生了很多事情！

于 2013-06-18T19:08:36.300 回答
0

看看http://jsfiddle.net/y6hSV/3/

HTML

<div id="DivHeader">

    <div id="DivLogo">

    <span class="Logo" id="SpLogo">Header</span><br/>
    <span class="Logo" id="SpSlogan">{sub header}</span>

    </div>

    <div id="DivPrabhu">
        <a  href="http://google.com">Who?</a>
        <a  href="https://www.facebook.com">Connect</a>
        <a href="#">Feedback/Bugs</a>
    </div>

</div>

<div id="DivMain">
 Some text to have layout
</div>

CSS

html,body
{
margin:0;
padding:0;
}

#DivHeader
{
float: left;
width:100%;
font-family: Century Gothic, sans-serif;
background-color:#3b5998;
}

#DivLogo
{
    position:relative;
    float:left;         /*please remove this property and run*/ 
    padding-bottom:10px;
    padding-top:10px
}

.Logo
{
    margin-left:20px;
    margin-right:20px;
    color:#fff; 
}

#SpLogo
{

    font-size:35px;
    font-weight:bold;
}

#SpSlogan
{
    font-size:20px;
}

#DivPrabhu{
    float: right;
    margin-top: 30px;
    font-size:13px;
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}


#DivPrabhu a{
    text-decoration:none;
    color:#fff;
    margin-left:15px;
}

#DivPrabhu a:hover{
    text-decoration:underline;
}

#DivMain{
    height:600px;
    width; 100%;
    background-color:red;
}
于 2013-06-18T18:31:46.737 回答
0

添加top: -5px;解决#DivMain您的问题！:)

看这里的小提琴。

于 2013-06-18T18:49:56.090 回答