html - 防止图像与表格边框重叠？

标签 html css responsive-design

我目前正在测试如何创建时事通讯。我做了一个模板。我对设计也很陌生。我制作了一张专辑发行表，但它不适合我创建的边界。我怎样才能解决这个问题？

我在这里添加了代码。

此外，我想指出，我将 CSS 添加到 html 中，以便特定的时事通讯网站可以接受时事通讯。尽管我被教导以另一种方式创建一个单独的 html 和 css 文件，但现在必须这样做。 

<!DOCTYPE html>
<html>
<head>
  <title>NewsLetter Template</title>
  <style type="text/css" >
  body {
    border: 5px solid #ffff;
    max-width: 700px;
    padding: 20px;
    width: 80%;
    margin: 20px auto;

  }
  .img1 {
    width: 100%;
    height:auto;
    position: relative
  } 

  .img2 {
    width: 50px;
    height: 50px;
    position: relative
  }

  h2 { 
    background-color: red;
    text-align:"center";
    font-family: Helvetica; 
    font-size: 20px; 
    font-weight: bold; 
    text-transform: uppercase;
    color: white;
  }

  .performance {
    width: 250px;
  }

  p {
     font-family: Helvetica; 
    font-size: 20px; 
    color: black;

  }

  .performancetype {
    font-size: 20px;
    font-family: Helvetica; 

  }

  h3 {
    font-family: Helvetica;
    font-weight: 500;  
  }

  table {
    display:inline-block;
     width:"100%"; 
   
  }
  </style>
</head>
<body>

<!-- Header -->

     
    <div style="min-height: 100vh; position: relative; border: 5px red solid; text-align: center;">
        <a href="http://www.google.com">
        <img class="img1" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt="Sample"/></a>

      <div>

<!-- Icons -->
        <tr> 
        <td align="center">
          <a href="http://www.google.com">
            <img class="img2" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt=" Facebook" border="0"/>
          </a>
          
      
          <a href="http://google.com">
            <img class="img2" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt=" Twitter"border="0"/>
          </a> 
      
        
          <a href="http://google.com">
            <img class="img2" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt="YouTube" border="0"/>
          </a>
        </td>         
      </tr>

    </div>

  <br></br>

<div>
  <h2>Check Out New Releases In The Following Categories</h2>
</div>

<!-- NEW RELEASE CATEGORIES -->


<!-- BEGIN UPCOMING INSTORE//-->
<h2>Upcoming Instore Events</h2>

<!-- BEGIN IN STORE -->


<!-- PERFORMER IMAGE -->


<div>
  <h2> Breakout Specials & Releases </h2>
</div>

<table>

  <tr>   
                   
                  
          <td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
            <div class="image"><a href="http://vvinyl.com/shop/LOVELYLP"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/Lovely250-250x250.jpg" 
            alt="LOVELYTHEBAND - FINDING IT PREORDER LP" title="LOVELYTHEBAND - FINDING IT PREORDER LP" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="http://vvinyl.com/shop/LOVELYLP">LOVELYTHEBAND</a></h4>
              <h4><a href="http://vvinyl.com/shop/LOVELYLP">FINDING IT PREORDER LP</a></h4>
              <p>[ LP ] PREORDER FOR EVENT WRISTBAND</p>
            </div>
          </td>
                                   
          <td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
            <div class="image"><a href="http://vvinyl.com/shop/LOVELYCD"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/Lovely250-250x250.jpg" 
            alt="LOVELYTHEBAND - FINDING IT PREORDER CD" title="LOVELYTHEBAND - FINDING IT PREORDER CD" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="http://vvinyl.com/shop/LOVELYCD">LOVELYTHEBAND</a></h4>
              <h4><a href="http://vvinyl.com/shop/LOVELYCD">FINDING IT PREORDER CD</a></h4>
              <p>[ CD ] PREORDER FOR EVENT WRISTBAND</p>
            </div>
          </td>
                                   
          <td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
            <div class="image"><a href="http://vvinyl.com/shop/602567572039"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/beatles-250x250.jpg" 
            alt="BEATLES - YELLOW SUBMARINE (PIC DISC)" title="BEATLES - YELLOW SUBMARINE (PIC DISC)" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="http://vvinyl.com/shop/602567572039">BEATLES</a></h4>
              <h4><a href="http://vvinyl.com/shop/602567572039">YELLOW SUBMARINE (PIC DISC)</a></h4>
              <p>[ New 7 inch Vinyl ] Limited edition 7-inch vinyl picture disc now available!</p>
            </div>
          </td>
      </tr>
      
      <tr>

          <td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
            <div class="image"><a href="http://vvinyl.com/shop/896308002842"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0619/clutch-250x250.JPG" 
            alt="CLUTCH - HOW TO SHAKE HANDS (PIC DISC)" title="CLUTCH - HOW TO SHAKE HANDS (PIC DISC)" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="http://vvinyl.com/shop/896308002842">CLUTCH</a></h4>
              <h4><a href="http://vvinyl.com/shop/896308002842">HOW TO SHAKE HANDS (PIC DISC)</a></h4>
              <p>[ New 7 inch Vinyl ] Picture disc now available!</p>
            </div>
          </td>
              
                                   
          <td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
            <div class="image"><a href="http://vvinyl.com/shop/840588116126"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/devil-250x250.jpg" 
            alt="DEVILDRIVER - OUTLAWS TIL THE END V.1" title="DEVILDRIVER - OUTLAWS TIL THE END V.1" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="http://vvinyl.com/shop/840588116126">DEVILDRIVER</a></h4>
              <h4><a href="http://vvinyl.com/shop/840588116126">OUTLAWS TIL THE END V.1</a></h4>
              <p>[ CD ] </p>
            </div>
          </td>
                                   
          <td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
            <div class="image"><a href="http://vvinyl.com/shop/190758510026"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/townsend-250x250.jpg" 
            alt="DEVIN TOWNSEND - OCEAN MACHINE: LIVE AT ANCIENT ROMAN THEATRE PLOVDIV" title="DEVIN TOWNSEND - OCEAN MACHINE: LIVE AT ANCIENT ROMAN THEATRE PLOVDIV" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="http://vvinyl.com/shop/190758510026">DEVIN TOWNSEND</a></h4>
              <h4><a href="http://vvinyl.com/shop/190758510026">OCEAN MACHINE: LIVE AT ANCIENT ROMAN THEATRE PLOVDIV</a></h4>
              <p>[ CD ] </p>
            </div>
          </td>

     </tr>

      <tr>   
         <td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
            <div class="image"><a href="http://vvinyl.com/shop/724596973523"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/goldfrapp-250x250.jpg" 
            alt="GOLDFRAPP - SILVER EYE (2CD/DELUXE)" title="GOLDFRAPP - SILVER EYE (2CD/DELUXE)" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="http://vvinyl.com/shop/724596973523">GOLDFRAPP</a></h4>
              <h4><a href="http://vvinyl.com/shop/724596973523">SILVER EYE (2CD/DELUXE)</a></h4>
              <p>[ CD ] </p>
            </div>
          </td>
                                   
          <td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
            <div class="image"><a href="http://vvinyl.com/shop/727361445225"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/immortal-250x250.jpg" 
            alt="IMMORTAL - NORTHERN CHAOS GODS (WHITE/BLACK)" title="IMMORTAL - NORTHERN CHAOS GODS (WHITE/BLACK)" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="http://vvinyl.com/shop/727361445225">IMMORTAL</a></h4>
              <h4><a href="http://vvinyl.com/shop/727361445225">NORTHERN CHAOS GODS (WHITE/BLACK)</a></h4>
              <p>[ LP ] Indie exclusive black and white colored vinyl LP pressing!</p>
            </div>
          </td>
               
                                   
          <td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
            <div class="image"><a href="http://vvinyl.com/shop/727361322021"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/immortal-250x250.jpg" 
            alt="IMMORTAL - NORTHERN CHAOS GODS" title="IMMORTAL - NORTHERN CHAOS GODS" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="http://vvinyl.com/shop/727361322021">IMMORTAL</a></h4>
              <h4><a href="http://vvinyl.com/shop/727361322021">NORTHERN CHAOS GODS</a></h4>
              <p>[ CD ] </p>
            </div>
          </td>
      </tr>
      <tr>
          <td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
            <div class="image"><a href="http://vvinyl.com/shop/190296955600"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/marr-250x250.jpg" 
            alt="JOHNNY MARR - CALL THE COMET (PURPLE)" title="JOHNNY MARR - CALL THE COMET (PURPLE)" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="http://vvinyl.com/shop/190296955600">JOHNNY MARR</a></h4>
              <h4><a href="http://vvinyl.com/shop/190296955600">CALL THE COMET (PURPLE)</a></h4>
              <p>[ LP ] Indie exclusive purple vinyl LP pressing!</p>
            </div>
          </td>
                                   
          <td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
            <div class="image"><a href="http://vvinyl.com/shop/190758588728"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/lucifer-250x250.jpg" 
            alt="LUCIFER - LUCIFER II" title="LUCIFER - LUCIFER II" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="http://vvinyl.com/shop/190758588728">LUCIFER</a></h4>
              <h4><a href="http://vvinyl.com/shop/190758588728">LUCIFER II</a></h4>
              <p>[ CD ] </p>
            </div>
          </td>
                                   
          <td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
            <div class="image"><a href="http://vvinyl.com/shop/405053840102"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/perfect-250x250.jpg" 
            alt="PERFECT CIRCLE - EAT THE ELEPHANT (RED/BLUE)" title="PERFECT CIRCLE - EAT THE ELEPHANT (RED/BLUE)" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="http://vvinyl.com/shop/405053840102">PERFECT CIRCLE</a></h4>
              <h4><a href="http://vvinyl.com/shop/405053840102">EAT THE ELEPHANT (RED/BLUE)</a></h4>
              <p>[ LP ] Red and blue vinyl LP pressing!</p>
            </div>
          </td>
     </tr>
    
     <tr>
          <td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
            <div class="image"><a href="http://vvinyl.com/shop/607618211523"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/murphy-250x250.jpg" 
            alt="PETER MURPHY - 5 ALBUMS" title="PETER MURPHY - 5 ALBUMS" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="http://vvinyl.com/shop/607618211523">PETER MURPHY</a></h4>
              <h4><a href="http://vvinyl.com/shop/607618211523">5 ALBUMS</a></h4>
              <p>[ CD ] </p>
            </div>
          </td>
                                   
          <td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
            <div class="image"><a href="http://vvinyl.com/shop/4050538388558"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/tiger-250x250.jpg" 
            alt="TIGER ARMY - DARK PARADISE (COLORED VINYL W/DL)" title="TIGER ARMY - DARK PARADISE (COLORED VINYL W/DL)" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="http://vvinyl.com/shop/4050538388558">TIGER ARMY</a></h4>
              <h4><a href="http://vvinyl.com/shop/4050538388558">DARK PARADISE (COLORED VINYL W/DL)</a></h4>
              <p>[ New 7 inch Vinyl ] </p>
            </div>
          </td>
                                   

      
      
   </tr>

</body>
</html>

当你运行它时，新版本看起来像这样

Screenshot

我该怎么办？

提前致谢。

最佳答案

让图像具有动态大小:

.img-responsive{
    width: 100%;
    height: auto;
}

他们将填写 <td>的宽度 100%(仅此而已)和高度将动态调整大小以保持原始纵横比。这对于矩形图像很有用，例如您示例中的黄色潜水艇相册。

关于html - 防止图像与表格边框重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51292138/

上一篇：html - 如何在旋转木马图像更改时保持不变的旋转木马容器顶部添加按钮？

下一篇：javascript - 如果单击上一页上的按钮，则自动滚动

相关文章：

css - 响应式图像拉伸(stretch) - 使用基于 y 轴的网格？

html - 如何动态填充无框网格？

javascript - 根据屏幕尺寸启用/禁用 Javascript

html - 在悬停时突出显示隐藏输入下的链接

css - 使用 v-for 指令插入时 Vue 不应用样式

html - ul在nav中的定位

html - 菜单项不可点击

jquery - onChange 方法不适用于 Thymeleaf 选择选项

html - CSS背景图片alt属性

javascript - 下载当前的 html 文件

©2024 IT工具网  联系我们