我有下面的代码为我的主页的中心。问题在于反应能力。当我调整浏览器窗口的大小时，右边的div隐藏到右边(屏幕外)，而中间的div保持居中(因为我希望它对任何窗口大小都是如此)。当中心div与左边div发生碰撞并被推离中心到右边时，就会出现这个问题。有没有办法使左div的行为像右边的(隐藏屏幕的左边-我不认为是可能的)?我已经尝试应用overflow: hidden隐藏在中心div后面的左div，但它看起来不太好。关于如何使我的设计响应的其他想法?
main {
margin-top: 200px;
display: flex;
justify-content: space-between;
}
#left {
width: 250px;
height: 250px;
background-color: blue;
transform: translateX(-50px);
animation: bounce_left 6s ease-in-out infinite;
}
#center {
width: 250px;
height: 250px;
background-color: red;
}
#right {
width: 250px;
height: 250px;
background-color: green;
animation: bounce_right 6s ease-in-out infinite;
}
@keyframes bounce_left {
0% {transform: translateX(-50px);}
50% {transform: translateX(0px);}
100% {transform: translateX(-50px);}
}
@keyframes bounce_right {
0% {transform: translateX(50px);}
50% {transform: translateX(0px);}
100% {transform: translateX(50px);}
}<html>
<head>
</head>
<body>
<main>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</main>
</body>
</html>制作这个片段实际上给了我一个想法，让所有三个div在包装器中占用33.33%的宽度空间，因为左边和右边的div各包含一个图像，我将左边图像的宽度设置为inherit，所以现在它只是在窗口调整大小时调整大小。它实际上赋予了它一个我从未想过的设计特征。我喜欢这个行业。这是修改后的代码片段，以便更有意义:
main {
margin-top: 200px;
display: flex;
justify-content: space-between;
}
#left {
width: 33.33%;
height: 250px;
background-color: blue;
transform: translateX(-50px);
animation: bounce_left 6s ease-in-out infinite;
}
#center {
width: 33.33%;
height: 250px;
background-color: red;
}
#right {
width: 33.33%;
height: 250px;
background-color: green;
animation: bounce_right 6s ease-in-out infinite;
}
@keyframes bounce_left {
0% {transform: translateX(-50px);}
50% {transform: translateX(0px);}
100% {transform: translateX(-50px);}
}
@keyframes bounce_right {
0% {transform: translateX(50px);}
50% {transform: translateX(0px);}
100% {transform: translateX(50px);}
}<html>
<head>
</head>
<body>
<main>
<div id="left"><img src="" alt="" style="width: 100%"></div>
<div id="center"></div>
<div id="right"><img src="" alt="" style="width: 100%"></div>
</main>
</body>
</html>现在，当我重新调整我的浏览器窗口的左div图像也调整大小。