問題與CSS對準這個

我的問題很簡單，但我無法弄清楚如何做到這一點。我有一個div，裏面，我顯示一些信息。基本上是這樣的：問題與CSS對準這個

title1:   20 
title2:   30

我想要的標題要左對齊，並以正確的數量。這裏是我如何做http://jsfiddle.net/MmLQL/34/。正如你所看到的，我在數字和標題（我相信來自使用h標籤）之間有一個換行符。但事實是，即使我使用的是應該內嵌顯示元素，且不強制換行的跨度標籤，我失去了文本對齊左/右選項。下面是一個〔實施例：http://jsfiddle.net/MmLQL/35/

來源

2013-09-25 user1499220

你是否像這樣http://jsfiddle.net/MmLQL/39/？ – MLeFevre

是的，謝謝！這就是我所需要的，只要我能接受不止一個答案！ – user1499220

你應該試試這種方式與「浮動」：

.container { 
    width: 100%; 
    clear: both; 
} 
.title { 
    float:left ; 
    display: inline; 
} 

.number { 
    float: right; 
} 

<div > 
    <div class="container"> 
     <div class="title">title:</div> 
     <div class="number">number </div> 
    </div> 
    <div class="container"> 
     <div class="title">title:</div> 
     <div class="number">number </div> 
    </div> 
</div>

來源

2013-09-25 15:02:43 Mario

浮動元素的顯示屬性將計算爲'block'，所以'display：inline'不是必需的。 –

我只是忘了刪除它:) – Mario

我會做這個woth float PARAM。就像這樣：http://jsfiddle.net/dan1410/MmLQL/38/

來源

2013-09-25 15:00:10

試試這個，http://jsfiddle.net/MmLQL/36/，

HTML

<div > 
    <h3>number </h3> 
    <h2 >title: </h2> 
</div> 
<div > 
    <h3>number </h3> 
    <h2 >title: </h2> 
</div> 
<div > 
    <h3>number </h3> 
    <h2 >title: </h2> 
</div> 
<div > 
    <h3>number </h3> 
    <h2 >title: </h2> 
</div>

CSS

h2 {text-align:left} 

h3 { 
    text-align: right; 
    float:right; 
}

您可能需要使用浮動明確了div雖然，這應該幫助，http://www.positioniseverything.net/easyclearing.html，

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

..並將div修改爲class =「clearfix」。

來源

2013-09-25 15:02:10

我認爲下面應該工作，使用inline-block的調整頭的佈局，然後在左對齊一個浮點數以確保它與正確的一個吻合。

div { width: 100%; } 
h2 { 
    width: 50%; 
    display: inline-block; 
    float: left; 
} 

h3 { 
    display: inline-block; 
    width: 50%; 
    text-align: right; 
}

來源

2013-09-25 15:03:14 Pixelburp

您還可以使用CSS表/表細胞

<div class="container"> 
    <h2>title: The Title</h2> 
    <h3>number</h3> 
</div>

CSS：

.container { 
    border: 1px solid gray; 
    display: table; 
    width: 400px; /* set to 100% if full width */ 
} 
h2 { 
    text-align:left; 
    display: table-cell; 
} 
h3 { 
    text-align: right; 
    display: table-cell; 
}

觀看演示http://jsfiddle.net/audetwebdesign/pcZaq/

如果你需要一些控制這種做法是非常有用的垂直對齊。

此外，表格單元格將始終保留在單行上，不像浮動或內嵌塊可以換行到小屏幕尺寸的第二行。

選擇部分取決於你想如何佈局以快速響應的方式表現。

來源

2013-09-25 15:11:58

而不是其他答案中提供的所有hacky解決方案，它看起來像要對齊表格數據。在這種情況下，你應該使用一個表格。

顯示：table-cell實際上只存在於CSS中以給出實際的元素，它的子元素是它們的樣式。它不應該用於讓非表格元素像表格元素一樣工作。至少，imho。

浮動：左看起來像一個好的選擇，如果你只是尋找對齊元素的佈局。

如果您的數據實際上是表格數據，則使用表格。它解決了你的問題，同時也更加語義化。

來源

2013-09-25 15:32:44 iainvdw

問題與CSS對準這個

回答

相關問題