Css Flexbox布局需要改进

我对Flexbox布局有以下问题

<dl class="address">
    <dt> <span class="jicons-icons"> <img src="https://demo.fastfit360.com/FF/images/warning.png" width="16" height="16"> </span> </dt>
    <dd> <span class="contact-street" > Address <br> </span> </dd>
    <dd> <span class="contact-suburb" > City <br> </span> </dd>
    <dd> <span class="contact-state" > State <br> </span> </dd>
    <dd> <span class="contact-postcode" > Zip-Code <br> </span> </dd>
    <dd> <span class="contact-country" > Country <br> </span> </dd>
    <dt> <span class="jicons-icons" > <img src="https://demo.fastfit360.com/FF/images/warning.png" width="16" height="16"> </span> </dt>
    <dd> <span class="contact-emailto"> <a href="mailto:info@website.com">info@website.com</a> </span> </dd>
    <dt> <span class="jicons-icons"> <img src="https://demo.fastfit360.com/FF/images/warning.png" width="16" height="16"> </span> </dt>
    <dd> <span class="contact-telephone" > phone number </span> </dd>
    <dt> <span class="jicons-icons"> <img src="https://demo.fastfit360.com/FF/images/warning.png" width="16" height="16"> </span> </dt>
    <dd> <span class="contact-fax" > fax number </span> </dd>
    <dt> <span class="jicons-icons"> <img src="https://demo.fastfit360.com/FF/images/warning.png" width="16" height="16"> </span> </dt>
    <dd> <span class="contact-mobile"> mobile number </span> </dd>
    <dt> <span class="jicons-icons"> <img src="https://demo.fastfit360.com/FF/images/warning.png" width="16" height="16"> </span> </dt>
    <dd> <span class="contact-webpage"> <a href="#" target="_blank"> website-link</a> </span> </dd>
</dl>

我很难让邮政编码和城市以及州和国家在同一条线上相邻

下面是我制作的一个JSFIDLE，它表示我在这部分代码中的当前状态：

重要的是要知道：

• 我无法更改html代码
• CSS选择器必须保持原样，因为可能会发生这样的情况，即状态未提供，因此丢失
• 我希望避免使用JS代码（这里的目标是纯CSS）

---

我无法找到使用flexbox的解决方案，但在这种情况下，浮动和定位可能会满足您的需要：

*{
框大小：边框框；
}
.地址{
宽度：100%；
位置：相对位置；
}
dd{
保证金：0；
左边距：40px；
线高：20px；
}
dt{
浮动：左；
}
dd+dt{
明确：两者皆有；
}
.联系电话：，
.联系国{
位置：绝对位置；
}
.联系方式邮政编码{
顶部：20px；
}
.联系国{
顶部：40px；
}
dl.地址>dd:类型+dd的第一个{
左边距：110像素；
}
dl.地址>dd:类型+dd+dd+dd+dd的第一个{
左边距：80px；
}

地址

城市

状态

邮政编码

国家

电话号码
传真号码
手机号码

我无法找到使用flexbox的解决方案，但在这种情况下，浮动和定位可能会满足您的需要：

*{
框大小：边框框；
}
.地址{
宽度：100%；
位置：相对位置；
}
dd{
保证金：0；
左边距：40px；
线高：20px；
}
dt{
浮动：左；
}
dd+dt{
明确：两者皆有；
}
.联系电话：，
.联系国{
位置：绝对位置；
}
.联系方式邮政编码{
顶部：20px；
}
.联系国{
顶部：40px；
}
dl.地址>dd:类型+dd的第一个{
左边距：110像素；
}
dl.地址>dd:类型+dd+dd+dd+dd的第一个{
左边距：80px；
}

地址

城市

状态

邮政编码

国家

电话号码
传真号码
手机号码

我可以在代码下面使用flexbox

更新css代码

dl.address > dt {
    margin: 0;
    flex: 0 0 7%;
    padding-right: 10px;
}

dl.address dd {
    margin-left: 0px;
    flex: 0 0 93%;
}

*{
框大小：边框框；
}
.地址{
宽度：100%；
显示器：flex；
调整内容：灵活启动；
调整项目：灵活启动；
柔性包装：包装；
弯曲方向：行；
}
dl.address>dt{
保证金：0；
弹性：0.7%；
右边填充：10px；
}
地址{
左边距：0px；
弹性：0.93%；
}
dl.address>dt：类型的第一个，
dl.address>dd：类型的第一个{
顺序：1；
}
dl.address>dd：类型+dd+dd+dd的第一个{
顺序：2；
宽度：自动；
左缘：7%；
}
dl.address>dd：类型+dd的第一个{
顺序：3；
宽度：自动；
左缘：7%；
}
dl.address>dd：类型+dd+dd的第一个{
左缘：7%；
顺序：4；
}
dl.address>dd：类型+dd+dd+dd+dd的第一个{
顺序：5；
左缘：7%；
}
dl.address>dt:n类型（2），
dl.address>dt:n类型（2）+dd{
顺序：6；
}
/*邮寄*/
dl.address>dt:n类型（3），
dl.address>dt:n类型（3）+dd{
订单：7份；
}
/*电话*/
dl.address>dt:n类型（4），
dl.address>dt:n类型（4）+dd{
订单：8份；
}
/*传真*/
dl.address>dt:n类型（5），
dl.address>dt:n类型（5）+dd{
顺序：9；
}
/*美孚*/
dl.address>dt:n类型（6），
dl.address>dt:n类型（6）+dd{
订单：10份；
}

地址

城市

状态

邮政编码

国家

电话号码
传真号码
手机号码

我可以在代码下面使用flexbox

更新css代码

dl.address > dt {
    margin: 0;
    flex: 0 0 7%;
    padding-right: 10px;
}

dl.address dd {
    margin-left: 0px;
    flex: 0 0 93%;
}

*{
框大小：边框框；
}
.地址{
宽度：100%；
显示器：flex；
调整内容：灵活启动；
调整项目：灵活启动；
柔性包装：包装；
弯曲方向：行；
}
dl.address>dt{
保证金：0；
弹性：0.7%；
右边填充：10px；
}
地址{
左边距：0px；
弹性：0.93%；
}
dl.address>dt：类型的第一个，
dl.address>dd：类型的第一个{
顺序：1；
}
dl.address>dd：类型+dd+dd+dd的第一个{
顺序：2；
宽度：自动；
左缘：7%；
}
dl.address>dd：类型+dd的第一个{
顺序：3；
宽度：自动；
左缘：7%；
}
dl.address>dd：类型+dd+dd的第一个{
左缘：7%；
顺序：4；
}
dl.address>dd：类型+dd+dd+dd+dd的第一个{
顺序：5；
左缘：7%；
}
dl.address>dt:n类型（2），
dl.address>dt:n类型（2）+dd{
顺序：6；
}
/*邮寄*/
dl.address>dt:n类型（3），
dl.address>dt:n类型（3）+dd{
订单：7份；
}
/*电话*/
dl.address>dt:n类型（4），
dl.address>dt:n类型（4）+dd{
订单：8份；
}
/*传真*/
dl.address>dt:n类型（5），
dl.address>dt:n类型（5）+dd{
顺序：9；
}
/*美孚*/
dl.address>dt:n类型（6），
dl.address>dt:n类型（6）+dd{
订单：10份；
}

地址

城市

状态

邮政编码

国家

电话号码
传真号码
手机号码