Html 如何正确对齐标签和跨距

我把这个放在一起

我有两个div，其中一个还有两个div。我要做的是在第二个div中正确定位标签和跨度

  <div id="someotherdiv">

  </div>
  <div class="reportuserinfo">
        <div class="leftdivinfo">
             <label>Teacher:</label><span>Teacher Name</span><br/>
            <label>District:</label><span>District Name</span><br/>
            <label>School:</label><span>School Name</span>
        </div>
        <div class="rightdivinfo">
            <label>Class:</label><span>Class Name</span><br/>
            <label>Content:</label><span id="currcontent">Content</span><br/>
            <label>Unit:</label><span id="currunit"></span>
        </div>
    </div>

他们现在的样子是

Teacher:     Teacher Name
District:   District Name
School:    School Name

---

感谢您的帮助。

您应该在css中定义一个最小宽度样式，而不是宽度：40%，以确保在浏览器宽度减小时，您试图写入的文本不会滚动

.leftdivinfo {
    float:left;
    min-width: 200px;
    width:40%;
    background: yellow;
    padding-left: 30px;
    padding-right: 30px;
} 

---

你试过用桌子吗？您可以将此信息包含在表格中，然后右对齐左列中的文本：

表格{
边界：无；
}
td：第一个孩子{
文本对齐：右对齐；
}
运输署{
填充物：5px；
}

班主任：
约翰·史密斯
地区:
史密斯维尔
学校：
史密斯高中

尝试将

宽度

设置为

自动

并添加

显示：内联块

.leftdivinfo {
  float:left;
  width: auto;
  background: yellow;
  padding-left: 10px;
  padding-right: 10px;
  display:inline-block
}

桌子可能是更好的方法

编辑：

---

我知道你想让冒号对齐，添加

minwidth:70px添加到标签类。
我刚刚添加了宽度：30%；在您的css类“.reportuserinfo标签”中，它修复了这个问题（）。您需要定义宽度以解决文本对齐问题。您可以根据需要调整空间边距

下面是您的代码现在在我看来的样子：-

.reportuserinfo label {
    float: left;;
  margin-right: 30px;
  font-weight: bold;
  text-align: right;
  width:30%;
}

我假设这个问题是针对响应性设计的？在我的屏幕上，文本以您想要的方式显示在一行上。当我缩小屏幕尺寸时，我就看到了您遇到的问题。我想说的是，把粉红色的方块移到黄色方块的下面，并增加宽度。对不起，我不知道你的意思。。在这里，我试图改变我的代码一点，但他们在相反的方向。。。此格式的标签应位于左侧，跨度位于右侧解决方案是否可行？请接受任何答案，如果他们帮助我。。。我加了这个，但我仍然需要它在正确的位置：）在正确的位置，我假设你想让你所有的冒号对齐？如果是，请为标签上应用的类定义最小宽度。如果您想将左、右div放在一行中，请同时为reportuserinfo类定义一个最小宽度。很抱歉，必须这样做divs@coder你特别需要的div是什么？这个解决方案是目前为止最优雅的，我可以帮助你找到一个解决办法，使它正常工作，如果有什么东西限制了你。
.reportuserinfo label {
    float: left;;
  margin-right: 30px;
  font-weight: bold;
  text-align: right;
  width:30%;
}