Question

我正在尝试创建一个分为3个div的标头它们都将被设置为显示：内联块左侧标题部分将包含一个口号和一个徽标，我不想成为口号徽标的权利

问题是我的logo div和我的口号div总是一个放在另一个上面。

根据我的理解，内联元素将放在最后一个内联元素旁边在同一个块中，注意header-left div的宽度为250px，每个都有子div有100px的宽度，为什么它们没有放在另一个旁边呢？

我的加价：

  <div id="header">
       <div id="header-left">
              <div id="logo" />
              <div id="slogan">
                 <span> Buy For U</span>           
              </div>
       </div>  
 </div>

我的css：

div#header
{
    border: 1px solid black ;
    height: 200px;
}
div#header div#header-left
{
    display: inline-block;    
    height: 100%;
    width: 250px;

}
div#header div#header-left div#logo
{
    display: inline-block;
    background: url("Google-Desktop-64.png") no-repeat center;
    background-size: 25%;
    height: inherit;
    width: 100px;
}
div#header div#header-left div#slogan
{
    display: inline-block;
    height: inherit;
    width:100px;
}

Answer 1

一切都很好。只需正确关闭徽标<div>即可。 "self-closing" tags

<div id="header">
       <div id="header-left">
              <div id="logo"></div>
              <div id="slogan">
                 <span> Buy For U</span>           
              </div>
       </div>  
 </div>

我还建议使用<img>作为徽标（并将其设为指向主页的链接），而不仅仅是背景。验证期间，空<div>标记容易出错。

Answer 2

很明显，你的#header宽度为200像素，孩子＃header-left 250像素，但除此之外，我认为最好使用浮点数。这意味着两个div彼此相邻：

div#header div#header-left div#logo
{
    float: left;
    background: url("Google-Desktop-64.png") no-repeat center;
    background-size: 25%;
    height: inherit;
    width: 100px;
}

div#header div#header-left div#slogan
{
    float: left;
    height: inherit;
    width:100px;
}

你的html / css中有一个明确的内容：

.clear_left { clear: left; }

和html：

<div id="header">
    <div id="header-left">
        <div id="logo" />
        <div id="slogan"><span> Buy For U</span></div>
        <div class="clear_left"></div>
    </div>  
</div>

css div的内联定位

2 个答案: