如何使用 div 标签创建布局并使其具有响应性 [关闭]
Posted
技术标签:
【中文标题】如何使用 div 标签创建布局并使其具有响应性 [关闭]【英文标题】：How to use a div tag to create a layout and make it responsive [closed] 【发布时间】：2020-04-08 15:13:58 【问题描述】：您好，我已尝试在下方创建布局
我已经使用表格标签创建了。但是布局没有响应。我想使用 div 标签但我不知道怎么做？我将反应组件放在这些布局中。
任何建议都有帮助。
【问题讨论】：
您能否分享您尝试实现此布局的代码？ 你已经尝试过什么，为什么没有成功？ 这应该对你有帮助：developer.mozilla.org/en-US/docs/Web/CSS/… @BenM 组件没有响应 ***.com/help/someone-answers 通过投票和接受答案（如果有效）来提供帮助 【参考方案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>
【讨论】：
以上是关于如何使用 div 标签创建布局并使其具有响应性 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章