响应中心弹出，适合他的内容

Responsive centered Popup that fits his Content

本文关键字：响应      更新时间：2023-09-26

我试图在过去的几个小时得到一个响应框居中，并自动缩小到他的内容。

我不知道怎么让它工作。

我用这个:

display: inline-block;

这样我可以让它适合他的内容我把我的弹出框在中心对齐为:

text-align: center;

但是我不知道如何让它响应。

编辑:

对不起，代码丢失了!

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .ModalWrapper {
            width: 100%;
            height: 100%;
            position: fixed;
            text-align: center;
        }
        .ModalPopup {
            background: #ffffff;
            border-radius: 5px;
            display: inline-block;
            border: solid thin #19b4b5;
        }
        .ModalTop {
            text-align: center !important;
            width: 100%;
            height: 30%;
            min-height: 30%;
            padding-top: 5%;
            padding-bottom: 5%;
            top: 0px;
            left: 0px;
            background-color: #19b4b5;
        }
        .ModalContent {
            display: inline-block;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="fb-root"></div>
    <script language="javascript" type="text/javascript">
        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.8";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    <div class="ModalWrapper">
        <div class="ModalPopup">
            <div class="ModalTop">Your Post</div>
            <div class="ModalContent">
                <div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-show-text="true">
                    <blockquote cite="https://www.facebook.com/20531316728/posts/10154009990506729/" class="fb-xfbml-parse-ignore"></blockquote>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

这还没有优化，我是一个完全的web开发新手。

非常感谢你的时间和帮助!

您可以使用Bootstrap来增加响应性。HTML有点麻烦，但它工作得很好，很容易使用。这里下载Bootstrap:

http://getbootstrap.com/

然后通过将弹出框包装在"row"div中来实现它:

<div class="row">

和另一个指定大小的div，例如:

<div class="col-md-4">

不同的网格大小和布局可以让你灵活地决定你想要的响应程度。

你可以在这里看到许多如何使用Bootstrap的网格的例子:

http://getbootstrap.com/examples/grid/

相关文章：