混淆浮動：左顯示：內聯塊和排隊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的

回答

相關問題