个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
有谁知道如何让 Modal 适合它的内容？当我放置宽度小于模态宽度的图像时，它周围有很多未使用的空间。这是codepen https://codepen.io/hetsketch/pen/LjYvOp?editors=1100#0
<html>
<head>
<title>Something gym related</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<a class="modal-trigger waves-effect waves-light btn" id="chest" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<img src="http://www.motsandco.com/wp-content/uploads/avatar-1-300x300.png" alt="">
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
但我想要这样的东西:
最佳答案
模态显示是通过使用 JavaScript 将 display 从 none 切换到 block 来实现的。它的宽度设置为 55%。
要使其宽度适应其内容，您需要将其显示设置为inline-block。要使其覆盖由 JavaScript 设置的 style 属性的特殊性，您需要给它 !important。但这也会在 display:none 不可见时覆盖它。而且似乎没有应用任何类，因此您可以 Hook 并仅在打开时设置模式样式。
但是你可以使用 flexbox 轻松解决这个问题。只需将模式包裹在 display:flex parent 中:
<div class="center-modal">
<div id="modal1" class="modal">
...
</div>
</div>
.center-modal {
display: flex;
}
.center-modal .modal {
position: relative;
width: auto;
}
已更新 codepen .
关于css - 如何创建可根据其内容调整的模态？实体化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45296777/
29
4
0
有谁知道如何让 Modal 适合它的内容？当我放置宽度小于模态宽度的图像时，它周围有很多未使用的空间。这是codepen https://codepen.io/hetsketch/pen/LjYvOp
我有一个结构如下的表: CREATE TABLE kaefko.se_vi_f55dfeebae00d2b3 ( value text PRIMARY KEY, id text, popularity
我有一个 SQL 查询是我的公司导师编写的，它创建了一个包含列 voucher_Id、quantity、used 和 remaining 的表，但是，他向我展示了我在 postgres 数据库中需要什
我是一名优秀的程序员,十分优秀！