使屏幕上的

Question

錨留我在屏幕上顯示的4名主播：

哈弗錨後放大，他們推上一個DIV在屏幕之外：

#box1{ 
 
    height: 100%; 
 
    width: 25%; 
 
    background-color: black; 
 
    transition: all 500ms ease-in-out; 
 
    
 
} 
 

 
#box1:hover{ 
 
    height: 100%; 
 
    width: 30%; 
 
    left:-5%; 
 
    
 
} 
 

 
#box2{ 
 
    height: 100%; 
 
    width: 25%; 
 
    background-color: green; 
 
transition: all 500ms ease-in-out; 
 
    
 
} 
 

 
#box2:hover{ 
 
    height: 100%; 
 
    width: 30%; 
 
    left:-5%; 
 
} 
 

 

 
#box3{ 
 
    height: 100%; 
 
    width: 25%; 
 
    background-color: blue; 
 
    
 
    
 
    
 
    
 
    
 
    transition: 500ms ; 
 
    
 
} 
 

 
#box3:hover{ 
 
    width: 30%; 
 
    height: 100%; 
 
    left:-5%; 
 
    
 
    
 
} 
 
#box4{ 
 
    height: 100%; 
 
    width: 25%; 
 
    background-color: darkviolet; 
 

 
    
 
} 
 

 
#box4:hover{ 
 
    height: 100%; 
 
    width: 30%; 
 
    left:-5%; 
 
    float: right; 
 
} 
 

 
.box { 
 
    float: left; 
 
    
 
} 
 

 
.boxdiv{ 
 
    height: 100%; 
 
    width: 100%; 
 
    position:fixed; 
 
}

 <div class="boxdiv"> 
 
    <a id="box1" class="box" > 
 
    <div> 
 
     
 
     </div> 
 
    </a> 
 
    <a id="box2" class="box"> 
 
    <div> 
 
     
 
     </div> 
 
    </a> 
 
    <a id="box3" class="box"> 
 
    
 
    </a> 
 
    <a id="box4" class="box"> 
 
    <div> 
 
     
 
     </div> 
 
    </a> 
 
</div>

如何讓錨點放大並將最後一個錨點留在屏幕上？我想要錨點放大，但紫色錨點也留在視圖中。

Answer 1

Flexbox可以做到這一點。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.red { 
 
    background: #f00; 
 
} 
 
.green { 
 
    background: #0f0; 
 
} 
 
.blue { 
 
    background: #00f; 
 
} 
 
.orange { 
 
    background: orange; 
 
} 
 
div { 
 
    height: 150px; 
 
    display: flex; 
 
} 
 
.parent a { 
 
    flex: 1 1 25%; 
 
    transition: flex-basis .5s ease; 
 
} 
 
.parent a:hover { 
 
    flex: 1 0 30%; 
 
}

<div class="parent"> 
 
    <a href="#1" class="box red"></a> 
 
    <a href="#2" class="box blue"></a> 
 
    <a href="#3" class="box green"></a> 
 
    <a href="#4" class="box orange"></a> 
 
</div>