Question

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>

我希望这样看的方式是：

[Image] Address         and right now I have:   [Image] Address 
        Zip-Code City                                   Zip-Code City
        State Country                                   State
[Image] mail                                            Country
[Image] phone                                   [Image] mail
[Image] fax                                     [Image] phone
[Image] mobile                                  [Image] fax
[Image] website                                 [Image] mobile
                                                [Image] website

我遇到Zip-Code＆amp;城市与州国家在同一条线上彼此相邻......

这是我制作的JSFiddle，它代表了我在代码的这一部分的当前状态： https://jsfiddle.net/72qesada/

重要的是要知道：

我无法更改html代码
CSS-Selectors必须保持原样，因为它可能会发生，因为可能会说没有提供状态，因此缺少
我想避免使用JS-Code（纯CSS是目标）

Answer 1

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

fiddle

＆＃13;

* {
  box-sizing: border-box;
}

.address {
  width: 100%;
  position: relative;
}

dd {
  margin: 0;
  margin-left: 40px;
  line-height: 20px;
}

dt {
  float: left;
}

dd+dt {
  clear: both;
}

.contact-postcode,
.contact-country {
  position: absolute;
}

.contact-postcode {
  top: 20px;
}

.contact-country {
  top: 40px;
}

dl.address>dd:first-of-type+dd {
  margin-left: 110px;
}

dl.address>dd:first-of-type+dd+dd+dd+dd {
  margin-left: 80px;
}

＆＃13;

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

＆＃13;

Answer 2

正如我在代码

下面的flexbox所做的那样

更新css代码

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

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

＆＃13;

    * {
    box-sizing: border-box;
}

.address {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
}

dl.address > dt {
    margin: 0;
    flex: 0 0 7%;
    padding-right: 10px;
}

dl.address dd {
    margin-left: 0px;
    flex: 0 0 93%;
}

dl.address > dt:first-of-type,
dl.address > dd:first-of-type {
    order: 1;
}

dl.address > dd:first-of-type + dd + dd + dd {
    order: 2;
    width: auto;
    margin-left: 7%;
}

dl.address > dd:first-of-type + dd {
    order: 3;
    width: auto;
    margin-left: 7%;
}

dl.address > dd:first-of-type + dd + dd {
    margin-left: 7%;
    order: 4;
}

dl.address > dd:first-of-type + dd + dd + dd + dd {
    order: 5;
    margin-left: 7%;
}

dl.address > dt:nth-of-type(2),
dl.address > dt:nth-of-type(2) + dd {
    order: 6;
}

/* Mail */
dl.address > dt:nth-of-type(3),
dl.address > dt:nth-of-type(3) + dd {
    order: 7;
}

/* phone */
dl.address > dt:nth-of-type(4),
dl.address > dt:nth-of-type(4) + dd {
    order: 8;
}

/* Fax */
dl.address > dt:nth-of-type(5),
dl.address > dt:nth-of-type(5) + dd {
    order: 9;
}

/* Mobil */
dl.address > dt:nth-of-type(6),
dl.address > dt:nth-of-type(6) + dd {
    order: 10;
}

＆＃13;

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

＆＃13;

Flexbox布局需要改进

2 个答案: