div的CSS内联定位

Question

我正在尝试创建一个分为 3 个 div 的标头 它们都将被设置为显示：inline-block 左侧标题部分将包含一个口号和一个徽标，但我不希望该口号出现在该处 徽标的右侧

问题是我的徽标 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 id="header">
       <div id="header-left">
              <div id="logo"></div>
              <div id="slogan">
                 <span> Buy For U</span>           
              </div>
       </div>  
 </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>