Question

我在测试网页上玩盒子模型。除非我调整浏览器的大小，否则一切正常。

如果浏览器调整大小以覆盖约标题的一半，我试图让标题减半并出现在标题的第一位下面。然而，这证明是一个问题。

以下是此特定问题的代码：

#header1 {
    color: darkorange;
    width: 500px;
    height: 30px;
    min-width: 300px;
    min-height: 30px;
    max-width: 500px;
    max-height: 70px; 
}

目前，当我调整浏览器大小时，标题的一部分会消失在浏览器的边缘。

我猜我误解了max / min-height / width的工作原理。

我是否需要在此处使用溢出命令？

<h1 id="header1">
    Welcome to Luc's Amazing Website!
</h1>
<br />

告诉我你是否需要更多代码，我不知道究竟需要多少代码。

Answer 1

要实现此目的，您需要将两个部件放在单独的盒子中。另外width: 500px;还不足以使整个标题符合一行。

＆＃13;

#header1 {
    color: darkorange;
}

#header1 span {
    display: inline-block;
}

＆＃13;

<h1 id="header1">
    <span>Welcome to Luc's</span> <span>Amazing Website!</span>
</h1>
<br />

＆＃13;

Answer 2

如果没有看到更多的代码，很难说，尽管以下应该足以实现您正在寻找的结果。

#header1 {
    color: darkorange;
    min-height: 30px;
    max-width: 500px;
    max-height: 70px;
}

请参阅小提琴中的示例https://jsfiddle.net/sh0fevt1/2/

具有最大/最小宽度/高度的简单CSS框模型问题

2 个答案: