html - 我的 heading3 左侧和右侧的图像

标签 html css image header

我想在 header3 的两边放置图像我希望它看起来像这样 http://bsmithpci.accountsupport.com/buccs-sched.jpg .这是我想要的标志图片http://bsmithpci.accountsupport.com/firelogo.jpg

<!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>Tampa Bay Buccaneers Fan Page</title>
 <meta name="author" content="Ben Smith">
 <meta name="description" content="introduction to HTML">
 <meta name="keywords" content="html, eclasses, website builder">
 <link href='http://fonts.googleapis.com/css?family=Pirata+One'
    rel='stylesheet' type='text/css' >
  <link rel="stylesheet" type="text/css" href="/final5.css">
</head>
<body>


  <p id="text" class="Three-Dee">Tampa Bay Buccaneers Fan Page</p>
  <br><br><br><br><br>

   <div class="file">
   <ul>
            <li>                   

     <a href="http://bsmithpci.accountsupport.com/final1.html"> 
                Home</a></li>
    <li><a href="http://bsmithpci.accountsupport.com/final2.html">
      Image Gallery</a></li>
    <li>
    <a href="http://bsmithpci.accountsupport.com/final3.html">Schedule</a>
    </li>
            <li><a href="http://bsmithpci.accountsupport.com/final5.html">
     Fan Club</a></li>
            <li><a href="http://bsmithpci.accountsupport.com/final4.html">
      Contact Us</a></li>
 </ul>
 </div>


<h1>Buccaneers Fan Club</h1><br><br><br>


  <h3>Buccaneer's 2014 Schedule</h3><br><br>

  <table id="Schedule">
    <tr>
      <th>Week</th>
       <th>Date</th>
       <th>Opponent</th>
       <th>Time(ET)</th>
     </tr>
    <tr class="alt">
     <td>1</td>
     <td>Sun, Sep 7</td>
      <td>Carolina</td>
      <td>1:00 PM</td>
    </tr>
   <tr>
    <td>2</td>
     <td>Sun, Sep 14</td>
      <td>St. Louis</td>
      <td>1:00 PM</td>
   </tr>
     <tr class="alt">
       <td>3</td>
      <td>Thu, Sep 18</td>
      <td>at Atlanta</td>
      <td>1:00 PM</td>
   </tr>
   <tr>
     <td>4</td>
     <td>Sun, Sep 28</td>
     <td>at Pittsburgh</td>
    td>1:00 PM</td>
   </tr>
   <tr class="alt">
    <td>5</td>
    <td>Sun, Oct 5</td>
   <td>at New Orleans</td>
    <td>1:00 PM</td>
   </tr>
  <tr>
    <td>6</td>
   <td>Sun, Oct 12</td>
    <td>Baltimore</td>
    <td>1:00 PM</td>
   </tr>
    <tr class="alt">
    <td>7</td>
    <td>*Bye</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
   </tr>
  <tr>
   <td>8</td>
    <td>Sun, Oct 26</td>
    <td>Minnesota</td>
    <td>1:00 PM</td>
  </tr>
    <tr class="alt">
    <td>9</td>
    <td>Sun, Nov 2</td>
    <td>at Cleveland</td>
   <td>1:00 PM</td>
   </tr>
    <tr>
     <td>10</td>
     <td>Sun, Nov 9</td>
     <td>Atlanta</td>
     <td>1:00 PM</td>
   </tr>
     <tr class="alt">
      <td>11</td>
     <td>Sun, Nov 16</td>
     <td>at Washington</td>
    <td>1:00 PM</td>
  </tr>
  <tr>
    <td>12</td>
    <td>Sun, Nov 23</td>
    <td>at Chicago</td>
    <td>1:00 PM</td>
  </tr>
   <tr class="alt">
    <td>13</td>
    <td>Sun, Nov 30</td>
    <td>Cincinnati</td>
    <td>1:00 PM</td>
   </tr>
  <tr>
   <td>14</td>
   <td>Sun, Dec 7</td>
   <td>at Detroit</td>
   <td>1:00 PM</td>
  </tr>
  <tr class="alt">
    <td>15</td>
    <td>Sun, Dec 14</td>
    <td>at Carolina</td>
   <td>1:00 PM</td>
  </tr>
  <tr>
    <td>16</td>
   <td>Sun, Dec 21</td>
    <td>Green Bay</td>
    <td>1:00 PM</td>
 </tr>
 <tr class="alt">
   <td>17</td>
   <td>Sun, Dec 28</td>
   <td>New Orleans</td>
    <td>1:00 PM</td>
  </tr>

</table>




 </body>
 </html>

最佳答案

您可以 float 您的图像分别到左边右边

<div id="container">
    <img id="one" src="http://bsmithpci.accountsupport.com/firelogo.jpg"/>
    <p id="text" class="Three-Dee">Tampa Bay Buccaneers Fan Page</p>
    <img id="two" src="http://bsmithpci.accountsupport.com/firelogo.jpg"/>
</div>

CSS:

img {
    height:30px;
}

#container{
    width:100%;
}

#one {
    float:left;
}

#two{
    float:right;
}

.Three-Dee{
    display:inline-block;
    text-align:center;
    width:80%;
    margin:auto;
}

示例:http://jsfiddle.net/cj2cc2nx/

关于html - 我的 heading3 左侧和右侧的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25352178/

相关文章:

html - TD 内的 100% 高度 DIV

Javascript 年龄验证弹出窗口

javascript - 数据未排序时如何对数组中的json数据进行排序?

css - 相对于视口(viewport)的 SVG 背景图像

JavaScript onClick 添加类

image - 相似图像压缩

html - flex item 中的文本垂直对齐不起作用,但添加父属性就可以了,为什么?

css - 更改 panelGrid 第一列的样式

c# - IValueConverter 获取空值 - WPF C#

java - 如何在 Eclipse Kepler 中合成图像?