Question

我有一个网站，在标题问题中有图像的图形放置。我正在使用html5以及bootstrap版本3.第一张图片放置得很好（当然）。文本部分很好地集中，就像我想要的那样。它是我遇到问题的右侧图形元素。我可以让图形向右和向上移动，但是当我这样做时，它仍然在我的祖父母div容器类之外。我需要图形保留在div .container中但位于它的右侧。我尝试了相对位置的样式并使用了正确的样式：0.5em，但这不起作用。我正在使用head元素中的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上有一个在线有效测试网站。

Answer 1

您可以重新排列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>

bootstrap定位图形元素

1 个答案: