时间戳

首页 > 解决方案 > 使用 flexbox div 进行响应式设计

html - 使用 flexbox div 进行响应式设计

问题描述

我的主页中心有以下代码。问题在于响应能力。当我调整浏览器窗口的大小时，右侧的 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>

标签： htmlcssresponsive-design

解决方案

制作片段实际上让我想到让所有三个 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 图像也会调整大小。

推荐阅读