Question

我目前正在建立自己的网站，我遇到了div及其边缘属性的问题。如果我将googleDiv的margin-top设置为100％，则div会移动到页面的最终端，而不是其父div的末尾。

HTML：

<div id="scrollspy2">
        <div id="test"><img id="facebook" src="facebook.png" data-toggle="tooltip" data-placement="left" data-animation="true" title="facebook"></div>
        <div id="twitterDiv"><img id="twitter" src="twitter.png" data-toggle="tooltip" data-placement="right" title="twitter"></div>
        <div id="googleDiv"><img id="googleplus" src="google+.png" data-toggle="tooltip" data-placement="right" title="google+"></div>

    <div class="container" id="customContainer">
            <div class="row">
                <div class=" col-md-12 col-md-offset-3">
                    <header>
                            <h1 style="font-size:1050%;"><u>Hi!</u></h1>
                            <h1 style="font-size:300%;">*** <strong>***************</strong>.</h1>
                    </header>
                    <p style="font-size:150%;">******* <strong>**********</strong> *********************</p>
                    <p style="font-size:130%;">************************************************ </p>
                    <button id="button1" class="btn btn">**********</button>
                    <p id="or">or</p>
                    <form class="displayinline"action="Contactfile.html">
                            <button id="button2" class="btn btn">******* *****</button>
                    </form>
                </div>
            </div>
        </div>  
    </div>

JS：

$("#scrollspy2").css("height",$(window).height());

Answer 1

我不太确定你到底是什么。从我认为这是div崩溃。因此，它为何超出其父元素。

请导入此ID元素，并在googleDiv ID之间留出空格

＆＃13;

#group:after{
    content: "";
    display: table;
    clear: both;
}

＆＃13;

所以把ID＆＃34; group＆＃34;在div元素中的GoogleDiv旁边，防止它崩溃

Answer 2

边距很好，但需要一些时间来适应。您可以在各种测量中定义它们，如px，％等。

这里的问题是，你有一个字体大小为1050％的字体。这是屏幕高度和宽度的10,5倍。或者说和你家一样大。

边距是在框的外部保留的空间，就像填充是用于框的内部。如果您在盒子的一侧放置100％的边距，浏览器会尝试推动盒子，只要它可以将其推到屏幕的侧面或底部。因为100％是屏幕的总宽度或高度。

如果您想在两个元素之间留出一个小空格，请尝试使用20px而不是100％

Answer 3

https://getbootstrap.com/examples/grid/

https://getbootstrap.com/css/#grid

将这3个div放入自己的行中，每个行使用col-md-12或col-md-4;甚至可能是一个容器。

否则{3}之后的<div class="clearfix"></div>可能会修复它。

为什么我的保证金不按照应有的方式运作？

3 个答案: