html - 需要创建此 HTML/CSS 网格布局
问题描述
我需要我的页面看起来像这样,但是,尽管我付出了努力,我还是无法让任何工作。
这是我目前拥有的:
.1 {
padding: 10px;
position: absolute;
left: 0px;
width: 50%;
}
.2 {
padding: 10px;
position: absolute;
left: 0px;
width: 50%;
}
.3 {
padding: 10px;
position: absolute;
right: 0px;
width: 50%;
}
解决方案
您可以通过Bootstrap row 和 col 来实现这一点:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Arnold Parge</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.my_box {
border: 1px solid black;
border-radius: 10px;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<div class="my_box"></div>
<div class="my_box"></div>
</div>
<div class="col-sm-6">
<div class="my_box"></div>
</div>
</div>
<div class="my_box"></div>
</body>
</html>
推荐阅读
- cdn - 我无法导入 js 库脚本 p5.js CDN 错误
- google-chrome - NET::ERR_CERT_VALIDITY_TOO_LONG - 服务器证书的有效期过长
- sql - 优化 SQL 查询:如何检查一个 Id 是否分配给了比其他 Id 更多的 Id(不应该)
- javascript - UseEffect 不会使用更新的状态
- jenkins - 在 CentOS 7 上安装 Jenkins 时无法启动
- python - 迭代字典时Django模板未检测到某些键
- string - Haskell:字符串中最后两个整数的总和
- r - 如何在创建条件R时使用级别而不是标签
- chat - Mesibo SDK:1对1聊天:语音笔记功能Android
- javascript - 将对象键重命名为不同格式的方法