Question

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

我想要的是a，b，c和d DIV出现在黄色带内和带有test1的DIV右侧。

我尝试了很多不同的组合，但我的想法已经不多了。桑迪普给了我一些大帮助。它现在几乎已经修复，但灰盒仍然很低。

任何人都可以提出建议。

谢谢

<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

Answer 2

给出黄色部分：

position:relative;

将a，b，c，d换成另一个div 包裹div的目标并添加此css：

width:200px; /*change to desired width*/
position:absolute;
right:0;

Answer 3

我刚刚将vertical-align:top应用到您小提琴中的灰色方框DIV中，这似乎解决了这个问题。

对浮动的困惑：左侧显示：内联块并排列DIV

3 个答案: