如何使用 div 标签创建布局并使其具有响应性 [关闭]答案

【问题标题】：How to use a div tag to create a layout and make it responsive [closed]如何使用 div 标签创建布局并使其具有响应性 [关闭]
【发布时间】：2020-04-08 15:13:58
【问题描述】：

您好，我已尝试在下方创建布局

我已经使用表格标签创建了。但是布局没有响应。我想使用 div 标签但我不知道怎么做？我将反应组件放在这些布局中。

任何建议都有帮助。

【问题讨论】：

您能否分享您尝试实现此布局的代码？
你已经尝试过什么，为什么没有成功？
这应该对你有帮助：developer.mozilla.org/en-US/docs/Web/CSS/…
@BenM 组件没有响应
stackoverflow.com/help/someone-answers 通过投票和接受答案（如果有效）来提供帮助

标签： html css reactjs sass

【解决方案1】：

像这样，如果你在没有花哨的 flexbox 的情况下这样做：

<div class="wrapper">
  <div class="right"></div>
  <div class="left">
    <div class="inner-top"></div>
    <div class="inner-bottom"></div>
  </div>
</div>

.wrapper {
  height: 200px;
  position: relative;
  width: 100%;
}

.right {
  width: 50%;
  background-color: blue;
  height: 100%;
  display:inline-block;
  float: left;
}

.left {
  width: 50%;
  background-color: red;
  height: 100%;
  display: inline-block;
}

.left .inner-top {
  height: 50%;
  width: 100%;
  background-color: yellow;
}

.left .inner-bottom {
    height: 50%;
    width: 100%;
    background-color: green;
}

工作代码笔：https://codepen.io/leo-melin/pen/WNboeBb

【讨论】：

【解决方案2】：


<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

.item1 {
  grid-column: 2 / span 1;
  grid-row: 1;
}

.item2 {
  grid-column: 1;
  grid-row: 1 / span 2;
}

</style>
</head>
<body>

<h1>A Three Items Grid Layout:</h1>

<div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>  
</div>


</body>
</html>

【讨论】：