我正在显示这些默认宽度的 div每次我尝试通过以下方式使这些 div 变大：<center><h4>CONTACTO</h4></center><div style="width:600px; height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container"> <div></div></div><br><div style="height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container"> <div></div></div><br><div style="height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container"> <div></div></div><br><div style="height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container"> <div></div></div></section></center>其中之一变宽，但它没有居中，即使我使用“center”标签也是如此。我得到：我想让这些 div 的大小与第一个 div 的大小相同，但居中。我尝试使用align=“center”，但它不起作用。提前致谢。
2 回答
青春有我
TA贡献1784条经验 获得超8个赞
如果您正在寻找移动设备和桌面设备上的完全响应式屏幕，我会使用 CSS Flex 框和/或 Bootstrap 之类的东西。它们可以帮助确保容器对任何屏幕宽度的响应能力。
.wrapper {
margin: 10px;
padding: 10px;
min-height: 100%;
}
h4 {
text-align: center;
}
.shell-container {
width: 600px;
height: 70px;
opacity: 0.3;
background: lightGrey;
border-radius: 6px;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
width: 80%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>El</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
</head>
<body>
<div class="wrapper fluid-container">
<h4>CONTACTO</h4>
<div class="shell-container">
<div></div>
</div>
<br>
<div class="shell-container">
<div></div>
</div>
<br>
<div class="shell-container">
<div></div>
</div>
<br>
<div class="shell-container">
<div></div>
</div>
<div>
</body>
</html>
BIG阳
TA贡献1859条经验 获得超6个赞
您的标签放错了位置。就是这个：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<center>
<h4>CONTACTO</h4>
<div style="width:600px; height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container">
<div></div>
</div>
<br>
<div style="width:600px; height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container">
<div></div>
</div>
<br>
<div style="width:600px; height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container">
<div></div>
</div>
<br>
<div style="width:600px; height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container">
<div></div>
</div>
<br>
<div style="width:600px; height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container">
<div></div>
</div>
<br> </section>
</center>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
- 2 回答
- 0 关注
- 36 浏览
添加回答
举报
0/150
提交
取消