Question

我正在尝试在页面上使用相同的空格（带有ID＆＃34; div和＃34;的div）来显示具有不同字体的两个文本字符串。我使用一个简单的JQuery动画在两者之间切换 - 第一个淡入，然后淡出，然后第二个淡入。正如我所说，两个文本字符串使用不同的字体，但我希望他们占用页面上相同数量的垂直空间。不幸的是，我无法弄清楚如何使包含div以一种同样响应的方式保持一致的高度。

如果我使用带有像素值的min-height，则字符串共享相同的垂直空间，但是当您调整窗口大小时，间距会变得不平衡。

当我使用百分比的最小高度时，它完全忽略了最小高度，并且＆＃34;标题＆＃34;当可见文本的字体发生变化时，div会调整大小。

如何制作＆＃34;标题＆＃34; div在不使用硬度和像素大小的情况下占据一致的大小（例如，40％）？

这是我的HTML / CSS / JavaScript：

＆＃13;

$(document).ready(function() {
    var fadeSpeed = 2000;
            
    $("#font1").delay(1000).fadeIn(fadeSpeed);
    $("#font1").fadeOut(fadeSpeed, function() {
	    $("#font2").fadeIn(fadeSpeed, function () {
      });
    });
});

＆＃13;

@import url("https://fonts.googleapis.com/css?family=Oswald:400,700,300");
@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy");
@import url("https://fonts.googleapis.com/css?family=Anton");

div {
    border: 1px solid black;
}

#logo {
    font-family: 'Luckiest Guy';
    font-size: 80px;
    font-size: 8.5vw;
}

#font1 {
    font-family: 'Anton';
    font-size: 100px;
    font-size: 10.5vw;
    display: none;
}

#font2 {
    font-family: 'Indie Flower', cursive;
    font-size: 20px;
    font-size: 2.5vw;
    display: none;
    padding-top: 5%;
    padding-bottom: 4%;
}

#container {
    margin: 0 auto;
    height: 0 auto;
    width: 100%;
}

#header {
    border: 2px solid red;
    min-height: 40%;
    /* min-height: 150px; */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id='container'>
        <div id='header'>
            <div id='font1'>
                <center>big font</center>
            </div>
            <div id='font2'>
                <center>small font</center>
            </div>
        </div>
        <div id='logo'>
            <center>logo text</center>
        </div>
    </div>
</body>

＆＃13;

Answer 1

您可以在CSS中为两个元素分配相同的height或line-height，以保持元素的大小相同

Answer 2

我相信下面的代码段可以满足您的需求。如果您将两个文本块的行高设置为相同，那么就它们的容器而言，它们的大小相同。我使用了px，你应该可以轻松地使用你想要的任何测量值。

$(document).ready(function() {
    var fadeSpeed = 2000;
            
    $("#font1").delay(1000).fadeIn(fadeSpeed);
    $("#font1").fadeOut(fadeSpeed, function() {
	    $("#font2").fadeIn(fadeSpeed, function () {
      });
    });
});

@import url("https://fonts.googleapis.com/css?family=Oswald:400,700,300");
@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy");
@import url("https://fonts.googleapis.com/css?family=Anton");

div {
    border: 1px solid black;
}

#logo {
    font-family: 'Luckiest Guy';
    font-size: 80px;
    font-size: 8.5vw;
}

#font1 {
    font-family: 'Anton';
    font-size: 100px;
    font-size: 10.5vw;
    display: none;
    line-height: 100px;
}

#font2 {
    font-family: 'Indie Flower', cursive;
    font-size: 20px;
    font-size: 2.5vw;
    display: none;
    line-height: 100px;
}

#container {
    margin: 0 auto;
    height: 0 auto;
    width: 100%;
}

#header {
    border: 2px solid red;
    height: 40% !important;
    /* min-height: 150px; */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id='container'>
        <div id='header'>
            <div id='font1'>
                <center>big font</center>
            </div>
            <div id='font2'>
                <center>small font</center>
            </div>
        </div>
        <div id='logo'>
            <center>logo text</center>
        </div>
    </div>
</body>

字体更改时如何保持div高度？

2 个答案: