基於內容的div對齊

我想要設計下面的截圖一樣的佈局。基於內容的div對齊

enter image description here

我嘗試用下面的代碼來做到這一點。

<div class="salesDiv"> 
     <div> 
      Quarter To Date 
     </div> 
     <div> 
      <a href="self">830</a> 
     </div> 
     <div> 
      <img src="~/Images/navigation-unit-actionplan.png" /> 
     </div> 
     <div class="offtier"> 
      <span>OFF TIER2</span> 
     </div> 
     <br /> 
    </div> 
    <br /> 
    <br /> 
    <div class="salesDiv"> 
     <div> 
      Rolling 3 Month 
     </div> 
     <div> 
      <a href="self">835</a> 
     </div> 
     <div> 
      <img src="~/Images/navigation-unit-actionplan.png" /> 
     </div> 
     <div class="offtier"> 
      <span>National 852</span> 
     </div> 
     <br /> 
    </div>

CSS：

.salesDiv { 
    width: 313px; 
margin-left: 10px; 
border: solid 1px gray; 
border-radius: 4px; 
height: 20px; 
display: inline-block; 
} 

.salesDiv > div { 
    float:left; 
    margin-left:20px; 
} 
.offtier { 
border-left-style: dotted; 
background-color: green; 
height: 20px; 
width: 88px; 

}

，但它沒有給出相同的佈局像上面的截圖。我想要像上面的截圖一樣做。出了什麼問題？請任何人看看這個。

http://jsfiddle.net/zHLMS/

間距也並不好。我需要爲邊界內的所有內容提供相等的間距。

我需要爲這兩個元素保持相同的寬度。

感謝，

溼婆

來源

2013-12-13 SivaRajini

您需要申請

display: inline-block; 
float:right;

到銷售> div的和float: right到offtier的div

Here's the modified code

來源

2013-12-13 06:03:59

，但它不是像按設計截圖提供自己。 – SivaRajini

我粘貼了錯誤的鏈接。再次更新它。看看 –

http://jsfiddle.net/zHLMS/17/。檢查一下，如果我給它1000下來。我需要爲這兩個元素 – SivaRajini

-2

試試這個.. .. Updated Link

.salesDiv { 
    width: 313px; 
margin-left: 10px; 
border: solid 1px gray; 
-webkit-border-radius:5px; 
border-radius:5px; 
height: 20px; 
display: inline-block; 
position:relative; 
} 

.salesDiv > div { 
    float:left; 
    margin-left:20px; 
} 
.offtier { 
-webkit-border-radius: 0 5px 5px 0; 
border-radius: 0 5px 5px 0; 
background-color: green; 
height: 20px; 
width: 88px; 
right:0; 
position:absolute; 
}

好Luck..Enjoy

來源

2013-12-13 06:30:06

基於內容的div對齊

回答

相關問題