Question

我目前有类似下面的内容。

<div width="100%">
  <span width="33%">FIRSTNAME</span>
  <span width="33%">|LASTNAME</span>
  <span width="33%">|CITY</span>
</div>

执行时的内容如下所示：

FIRSTNAME|LASTNAME|CITY

但我实际需要的是下面的内容:(占据页面宽度的100％，其中span元素各占主DIV元素的33％）

FIRSTNAME                      |LASTNAME                       |CITY

拜托，有人可以建议一种方法来实现这个目标吗？

Answer 1

您可以使用 Flexbox 执行此操作：

＆＃13;

div {
  display: flex; /* displays flex-items (children) inline */
  justify-content: space-between; /* evenly distributed */
}

span {
  flex: 1; /* each 33.33% of the flex-container's (parent's) width */
}

＆＃13;

<div>
  <span>FIRSTNAME</span>
  <span>|LASTNAME</span>
  <span>|CITY</span>
</div>

＆＃13;

Answer 2

您可以使用css

执行此操作

<div class="container">
  <span>FIRSTNAME</span>
  <span>|LASTNAME</span>
  <span>|CITY</span>
</div>

body {
  width: 100%;
}
.container {
  width: 100%;
}
.container span {
  width: 33%;
  display: inline-block
}

或者您可以使用bootstrap来帮助您解决此问题

https://getbootstrap.com/

如何使DIV或SPAN具有固定宽度的内容加上具有空白的休息可用空间？

2 个答案: