0

我有一个网站在标题问题中有图像的图形放置。我正在使用 html5 和 bootstrap 版本 3。第一个图像位置很好（当然）。文本部分很好地居中，就像我想要的那样。它是我遇到问题的右侧图形元素。我可以让图形向右和向上移动，但是当我这样做时，它仍然在我的祖父母 div 容器类之外。我需要图形保留在 div .container 中，但位于其右侧。我尝试过使用相对位置的样式并使用正确的样式：0.5em，但这不起作用。我正在使用头部元素中的modernizr以及bootstrap3 css调用。jQuery 和 bootstrap.js 链接到 html 文件的底部。我已经在 IE 和 Chrome 中尝试过渲染，并且都以同样愚蠢的方式行事。有什么建议么？？

<div class='container'>
    <header class='hidden-xs hidden-sm' style='height: 150px'>
      <img src='assets/media/tigerLogo.png' alt='Norman High School logo' style='padding-top: 0.5em' class='pull-left' />
      <h1 class='text-center'>Tiger Baseball</h1>
      <img src='assets/media/swingBatta.png' alt='Tiger swinging a bat graphic' class='pull-right' />
    </header>
    <nav class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainMenu">
          <span class="sr-only" href="#mainContent">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand visible-xs visible-sm" href="#">Tiger Baseball</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse" id="mainMenu">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Photos</a></li>
          <li><a href="#">Homerun Club</a></li>
          <li><a href="#">Support</a></li>
          <li><a href="#">Shop</a></li>
          <li><a href="#">News&#47;Events</a></li>
          <li><a href="#">Schedules</a></li>
          <li><a href="#">Rosters</a></li>
          <li><a href="#">Coaches</a></li>
          <li><a href="#">Archives</a></li>
        </ul>
      </div>
    </nav>
    <section id='mainContent' role='main'>
      <article></article>
      <aside></aside>
    </section>
    <footer>
      <p>Powered by: XXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
      <div id='sponsorAds' class='well well-sm'>
        <p>whose your daddy</p>
      </div>
    </footer>
  </div><!-- site container-->

我在 serco-hrc.com/rickTest/index.html 上有一个在线活动测试站点。

4

1 回答 1

0

您可以重新排列 DOM 元素，使浮动元素与非浮动元素对齐，如下所示：

<header class="hidden-xs hidden-sm" style="height: 180px;">
  <img src="assets/media/tigerLogo.png" alt="Norman High School logo" style="padding-top: 0.5em" class="pull-left">
  <img src="assets/media/swingBatta.png" alt="Tiger swinging a bat graphic" class="pull-right">
  <h1 class="text-center">Tiger Baseball</h1>
</header>
于 2013-09-24T21:33:02.407 回答