混淆浮动：左显示：内联块和排队DIV的

我有一个问题，我需要排列一些DIV。我做了一个小提琴页面，并希望得到一些建议。这里的fiddle 混淆浮动：左显示：内联块和排队DIV的

我想要的是，A，B，C和D DIV出现在黄色带和DIV右边的test1。

我尝试了很多不同的组合，而且我的想法已经不多了。 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; }

来源

2011-05-19 Samantha J

只要改变这个

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

这里是小提琴

Fiddle

来源

2011-05-19 09:30:42 Jawad

谢谢。这解决了我的问题。问候 – 2011-05-19 09:37:17

给黄色部分：

position:relative;

包A，B，C，d在另一个DIV 目标是包装DIV并添加这个CSS：

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

来源

2011-05-19 09:22:59

对不起，请问这是为了回答我的第一个问题，哪个sandeep为我解决？ – 2011-05-19 09:26:40

我不确定在这种情况下定位元素是否是最好的主意......它可能会在后面引入更多问题。 – DavidJCobb 2011-05-19 09:32:05

我只是在你的提琴应用vertical-align:top灰色框格，而且似乎解决它。

来源

2011-05-19 09:30:58 DavidJCobb

混淆浮动：左显示：内联块和排队DIV的

回答

相关问题