div的css内联定位

Question

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

问题是我的徽标 div 和我的标语 div 总是一个在另一个之上。

据我了解，内联元素将放置在最后一个内联元素旁边 在同一个块中，请注意 header-left div 的宽度为 250px，每个 子 div 的宽度为 100 像素，为什么它们不相邻放置？

我的标记：

  <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>