有谁知道如何让 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/