添加.json数据后，使用bootstrap在html中正确定位内容

因此，在包含紧急热线的文本正确对齐后，我无法将文本放在图像下方，以便连续三次显示数据（我尝试了col-4，但json弄糟了）。我的目标是图像，然后是图像正下方数字的内容。我试过：文本对齐、浮动、显示、媒体。任何帮助都将不胜感激，谢谢

目前的情况如下：

更新：这是问题的中间部分，占位符用于显示位置

在紧急情况下，请联系各自的东盟国家的相应服务部门，以获得适当的响应。这些号码可以通过固定电话或移动电话拨打，由警察局、消防局和医院救护车组成

走！

问题在于，在HTML结构中，您在单个集合表中列出所有国家的信息，同时显示表外每个国家的标志。“分解”这些存储在表中的信息不是很容易

解决这一问题的最佳方法是同时处理每个国家的国旗和服务信息。为此，我们首先将所有表元素转换为

s

，向每个新div添加类，并稍微更改它们的顺序：

<div class="country">
    <div class="media-left">
      <a href="#">
        <img class="media-object flagsize" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Flag_of_Brunei_1906-1959.svg/1000px-Flag_of_Brunei_1906-1959.svg.png" alt="...">
      </a>
    </div>
    <div class="country-info">
      <h4 class="media-heading country-title" ng-bind="service.country">Brunei</h4>
      <div class="left" ng-bind="service.hl1">Service 1</div>
      <div class="right" ng-bind="service.hl1num1">111</div>
      <div class="left" ng-bind="service.hl2">Service 2</div>
      <div class="right" ng-bind="service.hl1num2">222</div>
      <div class="left" ng-bind="service.hl3">Service 2</div>
      <div class="right" ng-bind="service.hl1num3">333</div>
    </div>
</div>

您还需要指定

.country info

的宽度应与

img.flagsize

的宽度相同，否则信息将被推到页面右侧：

img.flagsize, .country-info {
  max-width: 200px;
}

我制作了一把小提琴来展示这一点

使用这种结构，您可以更改布局的任何方面--边距、填充和高度不再构成问题；）

---

希望这有帮助！：）

你好。不幸的是，您在HTML代码中使用的图像仅在本地可用。这些图像对我们不可用，因此我们无法将其用作参考。请您更新您的代码，使其在一个列表中显示所有相关代码。谢谢很抱歉，我很快会在这里更新它。问题是，在HTML结构中，您在一个集合表中列出了所有国家的信息，同时显示了表外每个国家的标志。您应该对标志1、信息1、标志2、信息2等进行编码。将所有表元素转换为

，并将类添加到每个新div中，以便更容易地将它们作为目标。然后它只是一个组合的

float:left

和

clear:all

：）--我正在为这个做一把小提琴，请耐心听我说：）谢谢你，非常感谢它，它本身就可以很好地工作。然而，当我将它与json数据一起放入html中时，数字就延伸到了最右边。是否有一些快速修复方法？您是从我上面发布的代码片段中复制了CSS，还是从JSFIDLE中复制了CSS？因为在JSFIDLE中，我还指定了

.country info

的大小应该与国旗的大小相同。我忘了在这里的代码片段中包含那个引用。我在这里更新了我的答案来展示这一点：）哦，我道歉了，忽略了css文件哈哈，我还以为是图像宽度。无论如何，非常感谢

img.flagsize, .country-info {
  max-width: 200px
}

.left {
  float: left;
  clear: left;
}

.right {
  float: right;
  clear: right;
}

img.flagsize, .country-info {
  max-width: 200px;
}