如何缩短顶部边框并在Flex容器中实现左右分布布局？

问题1：缩短左右div的顶部边框 #

直接用border-top会撑满div宽度，要实现短顶部边框，伪元素是最灵活的方案，能精准控制边框长度和位置：

修改后的CSS（针对左右div） #

.semisquarel {
  width: 135px;
  height: 135px;
  border-left: white solid 2px;
  border-bottom: white solid 2px;
  border-right: none;
  position: relative; /* 为伪元素提供定位基准 */
}
.semisquarel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 80px; /* 自定义顶部边框长度 */
  height: 2px;
  background-color: white;
}

.semisquarer {
  width: 135px;
  height: 135px;
  border-left: none;
  border-bottom: white solid 2px;
  border-right: white solid 2px;
  position: relative;
}
.semisquarer::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 2px;
  background-color: white;
}

可根据需求调整width值改变顶部边框长度，或调整left/right值改变边框偏移位置。

问题2：Flex容器下实现左右div的分布效果 #

原代码中.divss设置了flex-direction: column导致子元素垂直排列，只需调整结构和Flex属性即可实现左右分布：

步骤1：调整HTML结构 #

把中间图片、文本包裹在单独容器中，让.divss的子元素变为「左侧div + 中间内容容器 + 右侧div」：

<div class="divss">
  <div class="semisquarel"></div>
  <div class="content-wrapper">
    <img src="images/Path 16.png" width="37px" height="50px">
    <p class="small">BEVERAGES</p>
    <p class="big">PRODUCT</p>
    <p class="small">RUM, WHISKEY, VODKA AND MORE</p>
    <p class="big">RANGE</p>
  </div>
  <div class="semisquarer"></div>
</div>

步骤2：修改Flex容器属性 #

去掉flex-direction: column，利用Flex横向布局特性实现两端对齐：

.divss {
  display: flex;
  justify-content: space-between; /* 子元素两端对齐 */
  align-items: center; /* 子元素垂直居中 */
  margin-top: 40px;
  padding: 0 20px; /* 可选，避免div贴容器边缘 */
  background: #bbb;
}

.content-wrapper {
  text-align: center; /* 内部文本居中 */
  line-height: 1.2; /* 修复原代码line-height过小导致的文本重叠 */
}

.small {
  font-family: futuraptdemi;
  font-size: 15px;
  letter-spacing: 1.5px;
  margin: 8px 0; /* 增加文本间距，提升可读性 */
}

.big {
  font-family: futuraptdemi;
  font-size: 50px;
  margin: 8px 0;
}

调整后左右div会自动分布在容器两侧，中间内容居中，完全无需依赖float属性。

内容的提问来源于stack exchange，提问作者Paul Timis