css - 对 float : left display: inline-block and lining up DIV's 的混淆

Question

我有一个问题，我需要排列一些 DIV。我做了一个 fiddle 页面，希望得到一些建议。这是 fiddle

我希望 a、b、c 和 d DIV 出现在黄色带内，并出现在带有 test1 的 DIV 的右侧。

我尝试了很多不同的组合，但我的想法已经用完了。 Sandeep 给了我一些很大的帮助。它现在几乎已修复，但灰色框仍然很低。

任何人都可以提出一些建议。

谢谢

<div class="header_left">
    <div class="header_logo">
        <div class="header_text">
            <div class="header_text1">Test1</div>
        </div>
    </div>
    <div class="hdr_info">
        <div id="info_left">
            <div id="info_left_top">
                a</div>
            <div id="info_left_btm">
                b</div>
        </div>
        <div id="info_right">
            <div id="info_right_top">
                c</div>
            <div id="info_right_btm">
                d</div>
        </div>
    </div>
</div>

div.header_left { background: yellow; height: 50px;}

div.header_logo { height:50px; display:inline-block; padding:0px 10px 0px 8px; background: #ABABAB; }
div.hdr_info    { height:50px; display:inline-block; padding:0px 10px 0px 8px; background: #DDFF00; }

div.header_text1 { display: inline-block; }

#info_left { display:inline-block; height: 50px; }
#info_right { display:inline-block; height: 50px; }

#info_left_top { background: #772299; }
#info_left_btm { background: #2299FF; }
#info_right_top { background: #FF2299; }
#info_right_btm { background: #FF99FF; }

Answer 1

只要改变这个

div.header_logo
{
height:50px;
display:inline-block;
padding:0px 10px 0px 8px;
background: #ABABAB;
float: left;

这是 fiddle

Fiddle