Question

这是我想要实现的布局的简单框架：http://i.imgur.com/7kmCBpd.png 我现在专注于标题，我已经设法让它看起来我想要它，但我觉得我没有采用最好的方法。当我调整浏览器宽度时，h1和h2元素末尾的单词将被推送到下一行，这会造成混乱。理想情况下，当浏览器变得太窄时，我希望标题的所有内容按比例缩放。实现这一目标的最佳方法是什么？

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <img src='logo.png' alt="Logo" class="logo">
            <h1>TITLE TITLE</h1>
            <h2 id="Subtitle1">SUBTITLE 1 SUBTITLE 1</h2>
            <h2 id="Subtitle2">SUBTITLE 2 SUBTITLE 2</h2>
        </header>
        <nav>
            <li><a href="index.html">Home</a></li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="resources.html">Resources</a></li>
            <li><a href="events.html">Events</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
            <li><a href="getinvolved.html">Get Involved</a></li>
        </nav>
        <footer>
            <p>&copy; 2014 </p>
        </footer>
    </body>
</html>

CSS

header {
    max-width: 800px;
    max-height: 285px;
    margin: auto;
}

h1, h2, li, p {
    font-family: "tw cen mt", "century gothic", sans-serif;
}

h1, h2 {
    position: absolute;
    display: inline;
    letter-spacing: 2px;
    float: left;
}

h1 {
    font-size: 5em;
}

h2 {
    font-size: 3em;
}

#Subtitle1 {
    top: 100px;
}

#Subtitle2 {
    top: 150px;
}

.logo {
    position: relative;
    display: inline;
    float: left;
    max-width: 285px;
}

Answer 1

也许应用以下内容可以获得您想要的内容

h1, h2 { white-space: nowrap; }

您可以使用media queries根据窗口大小调整元素大小。

另外，作为一般提示，请尝试使用{display：inline-block;}而不是{float：...;}。它将大大简化很多案例。

Answer 2

首先，如果你用一个div包裹你的标题然后漂浮它而不是标题，这将是一个很好的做法。像这样：

<强> HTML

<header>
    <img src='logo.png' alt="Logo" class="logo">
    <div id="h-container">
        <h1>TITLE TITLE</h1>
        <h2 id="Subtitle1">SUBTITLE 1 SUBTITLE 1</h2>
        <h2 id="Subtitle2">SUBTITLE 2 SUBTITLE 2</h2>
    </div>
</header>

<强> CSS

header img,
header #h-container { float:left; }

其次，你不应该将浮动与绝对定位混合在一起。在这种情况下，没有必要绝对定位你的标题。

对于缩放，您可以使用媒体查询来定位特定的浏览器宽度，并减小较小宽度的字体大小。如果您希望徽标也能扩展，您可以执行以下操作：

<强> HTML

<div id="logo-container">
    <img src='logo.png' alt="Logo" class="logo">
</div>

<强> CSS

#logo-container { max-width:200px; min-width:100px; }
#logo-container img { width:100%; height:auto; }

在CSS中使用布局挣扎

2 个答案: