时间戳

首页 > 解决方案 > 如何防止 div 在调整大小时与另一个 div 重叠？

html - 如何防止 div 在调整大小时与另一个 div 重叠？

问题描述

我的问题是当我调整屏幕大小以使屏幕更小时，我的 div 在某个点后开始重叠。但是，我想要的行为是当连续的多个 div 没有足够的空间时，那么 div 必须彼此下方并适合屏幕。我想在调整大小时保持我的网格间隙，或者如果可能的话使用弹性框。这是我的代码：

const gridTexts = [
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's."
];

const rootElement = document.getElementById("root");

ReactDOM.render(
   <div className ="App">
    <div className = "grid-container" > 
      {gridTexts.map((gridText) => ( 
        <div className = "card">
          <span> {gridText} </span> 
        </div>
      ))}
    </div>
   </div>,
  rootElement
);
.App {
  font-family: sans-serif;
  text-align: center;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  grid-template-rows: 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  margin-top: 50px;
}

.card {
  padding: 30px;
  height: 90%;
  background-color: aqua;
  min-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <title>React App</title>
</head>

<body>
  <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
  <div id="root"></div>
</body>

</html>

标签： htmlcssflexbox

解决方案

您可以使用display:flexwithflex-wrap来实现您想要的：

.App {
  font-family: sans-serif;
  text-align: center;
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 30px;
}

.card {
  box-sizing: border-box;
  width: calc(33.3333% - 20px);
  padding: 30px;
  height: 90%;
  background-color: aqua;
  min-width: 250px;
}
<div class="grid-container">
  <div class="card">
    <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </span>
  </div>
  <div class="card">
    <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </span>
  </div>
  <div class="card">
    <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </span>
  </div>
  <div class="card">
    <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </span>
  </div>
</div>

推荐阅读