我試圖制作一個div，它的寬度將包含在另外兩個div之間，這兩個div之間用空格隔開，而不是包含div的整個寬度。

我試圖達到一個設計，看起來像一個錦標賽。這是我們的目標:

但是以這個結(jié)尾:

以下是我的代碼:

.duel {
    display: flex;
    flex-direction: column;
}

.verticalLine {
    background-color: black;
    width: 5px;
    height: 50px;
}

.center {
    align-self: center;
}

.horizontalLine {
    background-color: black;
    width: 100%;
    height: 5px;
    align-self: center;
}

.verticalLineWrapper {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.opponent {
    width: 100px;
}

.opponets {
    display: flex;
    justify-content: space-around;
    gap: 4px;
}

<div class="duel">
    <img class="opponent center" src="https://picsum.photos/100?asdf=1" draggable="false" />
    <div class="verticalLine center" ></div>
    <div class="horizontalLine"></div>
    <div class="verticalLineWrapper">
        <div class="verticalLine"></div>
        <div class="verticalLine"></div>
    </div>
    <div class="opponets">
        <img class="opponent" src="https://picsum.photos/100?asdf=2" draggable="false" />
        <img class="opponent" src="https://picsum.photos/100?asdf=3" draggable="false" />
    </div>
  </div>

你可以只使用一個帶有左、右、上邊框的div來繪制一個完整的弧線:

<div class="line-container">
  <div class="verticalLine"/>
  <div class="arc"/>
</div>

和

.line-container{
  display: flex;
  align-items: center;
  flex-direction: column;
}

.arc{
  width: 50%;
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: black;
  height: 50px;
}

查看它在代碼片段中的樣子:

.duel {
  display: flex;
  flex-direction: column;
}

.verticalLine {
  background-color: black;
  width: 5px;
  height: 50px;
}

.center {
  align-self: center;
}


.opponent {
  width: 100px;
}

.opponets {
  display: flex;
  justify-content: space-around;
  gap: 4px;
}

.line-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.arc {
  width: 50%;
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: black;
  height: 50px;
}

<div class="duel">
  <img class="opponent center" src="https://robohash.org/player1" />

  <div class="line-container">
    <div class="verticalLine"></div>
    <div class="arc"></div>
  </div>
  
  <div class="opponets">
    <img class="opponent" src="https://robohash.org/player2" />
    <img class="opponent" src="https://robohash.org/player1" />
  </div>
</div>