两栏应格式化

Question

我像下面那样创建页脚，但效果不好。我希望“电话”恰好在“电子邮件”下方，并且其内容也应从地方开始。

我想把文字放在中间。我不介意是否需要提供id或class或需要稍微更改html。

喜欢：

               Name Surname                      Email:      namesurname@gmail.com
      Address: City, country                     Telephone:  +1 223 233 111

我的代码

#footer {
    display: flex;
    justify-content: center;
    background-color: rgba(0,0,0,0.7);
}

#footer > div:first-child {
    border-right: 1px solid white;
}

#footer > div {
    padding: 20px 0;
    margin: 20px 0;
    flex: 1;
    text-align: center;
}

#footer span {
    font-size: 15px;
    padding: 10px 0;
    color: white;
}

<section id="footer">
            <div>
                <div>
                    <span>Fname Lname</span>
                </div>
                <div>
                    <span>Address:</span>
                    <span>City, Country</span>
                </div>
            </div>
            <div>
                <div>
                    <span>Email:</span>
                    <span>namesurname@gmail.com</span>
                </div>
                <div>
                    <span>Telephone:</span>
                    <span>+1 525 111 222</span>
                </div>
            </div>
        </section>

任何帮助将不胜感激。

Answer 1

听起来像是表格布局：

#footer {
  display: flex;
  justify-content: center;
  /* To replace the border */
  background:linear-gradient(#fff,#fff) center/1px 60% no-repeat;
  background-color: rgba(0, 0, 0, 0.7);
  padding:20px 0;
}

#footer>div {
  display: table;
  margin:40px auto; /* Center  */
}

#footer>div>div {
  display: table-row;
}

#footer>div>div>span {
  display: table-cell;
  padding:0 10px;
  font-size: 15px;
  color: white;
}

/*Add empty cell for the Fnam Lname*/
#footer>div:first-child > div:first-child:before {
  content:"";
  display:table-cell;
}
/**/

<section id="footer">
  <div>
    <div>
      <span>Fname Lname</span>
    </div>
    <div>
      <span>Address:</span>
      <span>City, Country</span>
    </div>
  </div>
  <div>
    <div>
      <span>Email:</span>
      <span>namesurname@gmail.com</span>
    </div>
    <div>
      <span>Telephone:</span>
      <span>+1 525 111 222</span>
    </div>
  </div>
</section>

Answer 2

不更改HTML的一种可能性是对所有范围应用display: inline-block;和text-align: left;，然后对第二个DIV中的第一个和最后一个子范围应用不同的宽度（百分比或像素）下方：

（文本对齐方式只会影响具有定义宽度的跨度。）

#footer {
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
}

#footer>div:first-child {
  border-right: 1px solid white;
}

#footer>div {
  padding: 20px 0;
  margin: 20px 0;
  flex: 1;
  text-align: center;
}

#footer span {
  font-size: 15px;
  padding: 10px 0;
  color: white;
  display: inline-block;
  text-align: left;
}

#footer>div:last-child>div>span:first-child {
  width: 20%;
}

#footer>div:last-child>div>span:last-child {
  width: 50%;
}

<section id="footer">
  <div>
    <div>
      <span>Fname Lname</span>
    </div>
    <div>
      <span>Address:</span>
      <span>City, Country</span>
    </div>
  </div>
  <div>
    <div>
      <span>Email:</span>
      <span>namesurname@gmail.com</span>
    </div>
    <div>
      <span>Telephone:</span>
      <span>+1 525 111 222</span>
    </div>
  </div>
</section>

Answer 3

无需更改HTML，您只需在包含的text-align: left上设置<div>。由于您没有类别或ID，因此#footer > div:nth-of-type(2) > div最易于定位。

请注意，这将使您的文本与中央分隔线齐平，因此您可能还需要一些margin-left或padding-left。

这可以在下面看到：

#footer {
    display: flex;
    justify-content: center;
    background-color: rgba(0,0,0,0.7);
}

#footer > div:first-child {
    border-right: 1px solid white;
}

#footer > div {
    padding: 20px 0;
    margin: 20px 0;
    flex: 1;
    text-align: center;
}

#footer span {
    font-size: 15px;
    padding: 10px 0;
    color: white;
}

#footer > div:nth-of-type(2) > div {
  text-align: left;
  margin-left: 10px;
}

<section id="footer">
  <div>
    <div>
      <span>Fname Lname</span>
    </div>
    <div>
      <span>Address:</span>
      <span>City, Country</span>
    </div>
  </div>
  <div>
    <div>
      <span>Email:</span>
      <span>namesurname@gmail.com</span>
    </div>
    <div>
      <span>Telephone:</span>
      <span>+1 525 111 222</span>
    </div>
  </div>
</section>