Html 将此与CSS对齐的问题

我的问题很简单，但我不知道怎么做。 我有一个div，里面显示了一些信息。基本上是这样的：

title1:         20
title2:         30

我希望标题向左对齐，数字向右对齐。

---

我是这样做的。正如您所看到的，我在数字和标题之间有一个换行符（我相信这是因为使用了h标记）。但问题是，即使我使用了一个span标记，该标记应该内联显示元素，并且不强制换行，我也会丢失text align right/left选项。下面是一个示例：

我将使用

float

param执行此操作。像这样：

试试这个

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>

不过，您可能必须在div上使用float clear，这应该会有所帮助

---

…并将div修改为class=“clearfix”。

您应该用“float:”这样做：

.container{
宽度：100%；
明确：两者皆有；
}
.头衔{
浮动：左；
显示：内联；
}
.号码{
浮动：对；
}
标题：
数
标题：
数

我认为以下方法应该有效，使用内联块来调整标题的布局，然后在左对齐的标题上添加一个浮动，以确保它紧靠右对齐的标题

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

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

---

您还可以使用CSS表格/表格单元格

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

见演示

如果需要对垂直对齐进行某种控制，此方法非常有用

此外，表格单元格将始终保持在一行上，这与浮动或内联块不同，浮动或内联块可以换行以获得小屏幕尺寸

---

选择在一定程度上取决于您希望布局如何以响应方式运行。

与其他答案中提供的所有黑客解决方案不同，您似乎希望对齐表格数据。在这种情况下，您应该使用一个表来进行此操作

显示：表格单元格实际上只存在于CSS中，用于为实际元素及其子元素提供样式。它不应用于让非表元素的行为类似于表元素。至少，伊姆霍

浮动：如果您只希望对齐元素的布局，那么左侧似乎是一个不错的选择

---

如果您的数据实际上是表格数据，则使用表格。它解决了您的问题，同时更具语义。

您想要这样的东西吗？是的，谢谢！这就是我需要的，只要我能接受不止一个答案就好了！浮动元素的显示属性将计算为

block

，因此不需要

display:inline

。我只是忘记删除它：）

.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>

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

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

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