Question

我会努力确保这个问题不清楚＆＃34;根据SO标准。

问题：

我正在建立一个自适应网站，当窗口调整得很小时，第一部分会弹出并覆盖标题。

问题摘要：

第一部分是在调整大小时覆盖标题。

问题：明确说明

我想知道发生这种情况的原因以及如何解决这个问题。

CodePen示例重现问题：

http://codepen.io/anon/pen/MwQGBM

- 包含的代码 -

HTML：

      <head>
        <title>High Performance Floors | Home</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      </head>

      <body>
        <section id="wrapper">
          <!--=====================================================
              START Navigation
          ======================================================-->
          <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">High Performance Floors</a>
              </div>
              <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#about">Architects & Builders</a></li>
                  <li><a href="#contact">Image Gallery</a></li>
                  <li><a href="#">Contact Us</a></li>
                </ul>
              </div>
              <!--/.nav-collapse -->
            </div>
          </nav>
          <!--=====================================================
              END Navigation
          ======================================================-->

          <!--=====================================================
              START Header
          ======================================================-->
          <header class="main-header"><img src="images/icons/logo2.png"></header>
          <!--=====================================================
              End Header
          ======================================================-->
        </section>


        <!--=====================================================
                START  Main Container
        ======================================================-->
        <section>
          <div class="row">
            <div class="col-md-7">
              <div class="block-light block-shadow">
                <h3>Extreme Flooring and Surfaces</h3>

                <p>High Performance Floors of Jacksonville, Florida, is a locally owned and family-operated business specializing in both residential and commercial concrete and surface-coating solutions.</p>

                <p>We are a small group of highly motivate individuals who aim to provide our customers with the best service, products and overall experience in the market. To have one of our representatives assist you with your concrete flooring and surface
                  requirements please contact us by calling (904) 386-2089 or fill out our Online Quote Request Form for a quick email response.</p>
              </div>
            </div>
            <!-- End Col -->

            <div class="col-md-5">
              <div class="block-light block-shadow">
                <h3>Extreme Concrete</h3>
                <img class="pull-left" src="images/icons/main_page_sub_image1_stain.png">
                <h4>Acid Stained:</h4>
                <p>Kemiko Stone Tone Stain transforms an ordinary concrete slab into a luxurious floor that resembles marble or glazed stone at a fraction of the cost.</p>
              </div>
            </div>
          </div>
          <!-- End Row -->

        </section>
        <!--=====================================================
                END Main Container
        ======================================================-->

CSS：

我刚开始使用Sass而且我不确定要包含哪些css的特定部分，因为它冗长而复杂。我认为把所有的css放在这里最终会让人感到困惑而不是有用。

希望所有强大的和所有知道的SO mod都会看到他们神圣的怜悯，以原谅我不可饶恕的罪。毕竟，我只是凡人，我的假设可能是错的。

我希望尽管我犯了错误，但有人能够慷慨地帮我解决问题。

Answer 1

删除：＆＃34; <property name="webServiceHost">${jboss.bind.address}</property>＆＃34;来自css / Sass中的float: left;，它将解决您的问题。

Answer 2

标题中的元素全部浮动，导致标题折叠且没有高度。一个简单的解决方法是添加clearfix类。

<section id="wrapper" class="clearfix">

Updated Codepen

Answer 3

看起来你正在使用Bootstrap，因此你需要为标题内容提供空间。

添加如下内容：

static string GenerateSasToken(Uri uri, string sasKeyValue, string sasKeyName)
        {
            var targetUri = HttpUtility.UrlEncode(uri.ToString().ToLower(), Encoding.UTF8).ToLower();
            var expiresOnDate = Convert.ToInt64(DateTime.UtcNow.Subtract(new DateTime(1970, 1, 1, 0, 0, 0)).TotalSeconds) + 2*60*60;
            var toSign = targetUri + "\n" + expiresOnDate;

            var keyBytes = Encoding.UTF8.GetBytes(sasKeyValue);
            var mac = new HMACSHA256(keyBytes);
            mac.Initialize();
            var rawHmac = mac.ComputeHash(Encoding.UTF8.GetBytes(toSign));
            var signature = HttpUtility.UrlEncode(Convert.ToBase64String(rawHmac), Encoding.UTF8);

            var token = "SharedAccessSignature sr=" + targetUri + "&sig=" + signature + "&se=" + expiresOnDate + "&skn=" + sasKeyName;
            return token;
        }

使用它来计算标题的大小很好。

否则，您的错误不是很清楚。指定导致问题的Div或深入了解您的错误。

Div弹出标题

3 个答案: