多目標位置HTML/CSS

Question

我一直在試圖獲得了很久這個postioning正確的，她是那它應該看起來像一個素描：

這裏的CSS，我找到感覺：

.team1 { 
    margin-left: 9; 
} 
.team2 { 
    float: right; 
    right: 10; 
    position: relative; 
} 

.team1text{ 
    float: left; 
    left: 150; 
    top:50; 
    position: relative; 
} 
.team2text{ 
    float: right; 
    right: 150; 
    top:30; 
    position: relative; 
} 
.team1winlose{ 
    float: left; 
    left: 150; 
    top:50; 
    position: relative; 
} 
.team2winlose{ 
    float: right; 
    right: 150; 
    top:50; 
    position: relative; 
} 
.vs { 
    positon: relative; 
    top: 30; 
    float: right; 
    right: 50%; 
} 

但現在看起來是這樣的，當我打開網頁：

Answer 1

有了你可以做flexbox這樣

.wrapper { 
 
    display: flex; 
 
} 
 
.wrapper .logo { 
 
    flex: 0; 
 
} 
 
.wrapper > :not(.logo) { 
 
    flex: 1; 
 
    text-align: center; 
 
    word-break: break-all; 
 
} 
 
.wrapper :not(.logo) div { 
 
    font-size: 32px; 
 
    font-weight: bold; 
 
} 
 
.wrapper :not(.logo) span { 
 
    font-size: 16px; 
 
} 
 
.wrapper .separator { 
 
    flex: 0; 
 
    min-width: 70px; 
 
}

<div class="wrapper"> 
 

 
    <div class="logo"> 
 
    <img src="http://placehold.it/150"> 
 
    </div> 
 
    <div> 
 
    <div>Team 12345678</div> 
 
    <span>Wins/Losses</span> 
 
    </div> 
 
    <div class="separator"> 
 
    <div>VS</div> 
 
    </div> 
 
    <div> 
 
    <div>Team 2</div> 
 
    <span>Wins/Losses</span> 
 
    </div> 
 
    <div class="logo"> 
 
    <img src="http://placehold.it/150"> 
 
    </div> 
 

 

 
</div>

對於舊的瀏覽器，display: table

.wrapper { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.wrapper .logo { 
 
    display: table-cell; 
 
    width: 150px; 
 
} 
 
.wrapper > :not(.logo) { 
 
    display: table-cell; 
 
    width: 20%; 
 
    text-align: center; 
 
    vertical-align: top; 
 
} 
 
.wrapper :not(.logo) div { 
 
    font-size: 32px; 
 
    font-weight: bold; 
 
} 
 
.wrapper :not(.logo) span { 
 
    font-size: 16px; 
 
}

<div class="wrapper"> 
 

 
    <div class="logo"> 
 
    <img src="http://placehold.it/150"> 
 
    </div> 
 
    <div> 
 
    <div>Team 1</div> 
 
    <span>Wins/Losses</span> 
 
    </div> 
 
    <div> 
 
    <div>VS</div> 
 
    </div> 
 
    <div> 
 
    <div>Team 2</div> 
 
    <span>Wins/Losses</span> 
 
    </div> 
 
    <div class="logo"> 
 
    <img src="http://placehold.it/150"> 
 
    </div> 
 

 
</div>