麻烦在css边界图像

这是我的第一篇文章，我很抱歉 - 几乎是一个新手。我尝试了所有我能想到的技术，并且无法弄清楚如何在我的网站中的三个特定图片周围创建边框。我的网站是glh222.github.io 麻烦在css边界图像

你会注意到6个图像，其中三个是适当的边界和大小，另外3个是非常大的。我已将所有图片编辑为285px，并且我在HTML和CSS中的代码是一致的。我会将代码发布到下面的html和css的相关部分，请让我知道是否有人可以提供帮助。提前致谢！

<section id="GT"> 
<a href="#"> 
<img src="Images/gtsport.jpg" alt="Granturismo on an open road"> 
<p>Granturismo</p> 
</a> 
</section> 
<section id="GTC"> 
<a href="#"> 
<img src="Images/GTC.jpg" alt="Granturismo Convertible"> 
<p>Granturismo Convertible</p> 
</a> 
</section> 
<section id="GHIBLI"> 
<a href="#">  
<img src="Images/GhibliSnow.jpg" alt="Ghibli in the snow"> 
<p>Ghibli</p> 
</a> 
</section> 
<section id="GHIBLISQ4" 
<a href="#"> 
<img src="Images/GTSLogo1.jpg" alt="SQ4 Logo"> 
<p>Ghibli SQ4</p> 
</a> 
</section> 
<section id="QP" 
<a href="#"> 
<img src="Images/QPblur1.jpg" alt="QP blurred"> 
<p>Quattroporte</p> 
</a> 
</section> 
<section id="QPS" 
<a href="#"> 
<img src="Images/GTSrear1.jpg" alt="Rear Facing in the snow"> 
<p>Quattroporte GTS</p> 
</a> 
</section>

CSS

#GT img { 
width:100%; 
padding:.5em, auto; 
margin: .5em; 
background-color:#c7ccf; 
border: 20px black solid; 
font-size: 1.5em; 
font-family: 'Roboto', sans-serif; 
text-align: center; 
font-weight: 800; 
font-weight: bold; 
color: white; 
float: left; 
} 

#GTC 
img { 
width:100%; 
padding:.5em, auto; 
margin: .5em; 
background-color:#c7ccf; 
border: 20px black solid; 
font-size: 1.5em; 
font-family: 'Roboto', sans-serif; 
text-align: center; 
font-weight: 800; 
font-weight: bold; 
color: white; 
} 

#GHIBLI 
img { 
width:100%; 
padding:.5em, auto; 
margin: .5em; 
background-color:#c7ccf; 
border: 20px black solid; 
font-size: 1.5em; 
font-family: 'Roboto', sans-serif; 
text-align: center; 
font-weight: 800; 
font-weight: bold; 
color: white; 
} 

#GHIBLISQ4 
img { 
width:100%; 
padding:.5em, auto; 
margin: .5em; 
background-color:#c7ccf; 
border: 20px black solid; 
font-size: 1.5em; 
font-family: 'Roboto', sans-serif; 
text-align: center; 
font-weight: 800; 
font-weight: bold; 
color: white; 
} 

#QP 
img { 
width:100%; 
padding:.5em, auto; 
margin: .5em; 
background-color:#c7ccf; 
border: 20px black solid; 
font-size: 1.5em; 
font-family: 'Roboto', sans-serif; 
text-align: center; 
font-weight: 800; 
font-weight: bold; 
color: white; 
} 

#QPS 
img { 
width:100%; 
padding:.5em, auto; 
margin: .5em; 
background-color:#c7ccf; 
border: 20px black solid; 
font-size: 1.5em; 
font-family: 'Roboto', sans-serif; 
text-align: center; 
font-weight: 800; 
font-weight: bold; 
color: white; 
} 

a:hover { 
background-color: #aaaaaa;

来源

2015-06-21 Gregg Hayim

看起来你没有得到在底部3的边界，因为你的代码是在多个领域打破。

首先，你有一个额外的：

<link href=

靠近你的页面的顶部和你缺少一个>在这三条线的末尾：

<section id="GHIBLISQ4"

应该是：

<section id="GHIBLISQ4">

同样适用于：

<section id="QP"

应该是：

<section id="QP">

和

<section id="QPS"

应该是：

<section id="QPS">

你完整的代码应该是这样的：

  <!DOCTYPE html> 
      <html> 
       <head> 
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,700italic' rel='stylesheet' type='text/css'> 
        <link rel="stylesheet" type="text/css" href="styles.css"> 
        <title>"Maserati of Long Island"</title> 
       </head> 
       <body> 
        <header> 
          <h1> Welcome to Maserati of Long Island, A Division of The Experience Auto Group 
          Maserati...The Absolute Opposite of Ordinary</h1> 
        </header> 
         <div id="slogan"> 
          <h2>Long Island's only factory authorized dealership</h2> 
         </div> 
        <section id="GT"> 
          <a href="#"> 
           <img src="Images/gtsport.jpg" alt="Granturismo on an open road"> 
           <p>Granturismo</p> 
          </a> 
        </section> 
        <section id="GTC"> 
          <a href="#"> 
           <img src="Images/GTC.jpg" alt="Granturismo Convertible"> 
           <p>Granturismo Convertible</p> 
          </a> 
        </section> 
        <section id="GHIBLI"> 
          <a href="#">  
           <img src="Images/GhibliSnow.jpg" alt="Ghibli in the snow"> 
           <p>Ghibli</p> 
          </a> 
        </section> 
        <section id="GHIBLISQ4"> 
          <a href="#"> 
           <img src="Images/GTSLogo1.jpg" alt="SQ4 Logo"> 
           <p>Ghibli SQ4</p> 
          </a> 
        </section> 
        <section id="QP"> 
          <a href="#"> 
           <img src="Images/QPblur1.jpg" alt="QP blurred"> 
           <p>Quattroporte</p> 
          </a> 
        </section> 
        <section id="QPS"> 
          <a href="#"> 
           <img src="Images/GTSrear1.jpg" alt="Rear Facing in the snow"> 
           <p>Quattroporte GTS</p> 
          </a> 
        </section> 
         </nav> 
        <section id="about"> 
         <div class="wrapper"> 
          <h2>Operating from a state-of-the-art facility that's located in the heart of Long Island, our expertly trained staff is committed to serving each of your needs from the moment you walk through our doors, keeping one tenet in mind above all else: treating you like a member of our "family" from the moment you walk through the doors</h2> 
         </div> 
        </section> 
        <footer> 
         <p> You can contact us by calling (516) 665-1665, or if you prefer, you can stop by 65 South Service Rd, Plainview, New York 11803 and speak with us in person.</p> 
        </footer> 
       </body> 
      </html>

这会让你的页面看起来如下： enter image description here

此外，你可能要为你的形象一个单一的CSS类，然后应用类的所有图像，而不是使用单独的类为每个图像。这样，您的所有照片都将统一且样式完全相同，而且您不必编写尽可能多的代码。

您可能还想调整照片大小/裁剪照片，因为它们现在不均匀，部分原因是虽然它们宽度都一样，但它们并不都是一样的高度，所以有些更高相对于其它的。

和

，如果你想摆脱周围的第一形象，灰色框的

，删除浮动：左; #GT img CSS

来源

2015-06-21 21:44:24 Josh979

谢谢！我感谢你帮助我 –

您的HTML已损坏。您的某些section标签未使用>关闭。
如果你想对几个元素应用相同的规则，给他们一个class。我在下面的修复中给出了.cars的元素类。
您不应该将文本格式规则应用于img标记，而应该是实际包含一些文本的元素。
您可能想使用display:inline-block;和vertical-align:top;而不是float:left;，因为您的元素具有不同的高度。
如果您希望保留其原始尺寸，请从图像中删除width:100%。如果要使每个元素具有相同的宽度，请将宽度应用于容器（section元素），并给img一个max-width,100%。

.cars{ 
 
    display:inline-block; 
 
    font-size: 1.5em; 
 
    font-family:'Roboto', sans-serif; 
 
    text-align: center; 
 
    font-weight: 800; 
 
    font-weight: bold; 
 
    vertical-align:top; 
 
} 
 

 
.cars a{ 
 
    display:block; 
 
    padding: .5em; 
 
    color: white; 
 
    text-decoration:none; 
 
} 
 

 
.cars p{ 
 
    background-color: #aaaaaa; 
 
} 
 

 
.cars img { 
 
    background-color:#c7ccf; 
 
    border: 20px black solid; 
 
    box-sizing:border-box; /* so the sizing of the image will include its border */ 
 
} 
 
.cars a:hover { 
 
    background-color: #aaaaaa; 
 
}

<section id="GT" class="cars"> 
 
    <a href="#"> 
 
     <img src="http://glh222.github.io/Images/gtsport.jpg" alt="Granturismo on an open road"> 
 
     <p>Granturismo</p> 
 
    </a> 
 
</section> 
 
<section id="GTC" class="cars"> 
 
    <a href="#"> 
 
     <img src="http://glh222.github.io/Images/GTC.jpg" alt="Granturismo Convertible"> 
 
     <p>Granturismo Convertible</p> 
 
    </a> 
 
</section> 
 
<section id="GHIBLI" class="cars"> 
 
    <a href="#"> \t 
 
     <img src="http://glh222.github.io/Images/GhibliSnow.jpg" alt="Ghibli in the snow"> 
 
     <p>Ghibli</p> 
 
    </a> 
 
</section> 
 
<section id="GHIBLISQ4" class="cars"> 
 
    <a href="#"> 
 
     <img src="http://glh222.github.io/Images/GTSLogo1.jpg" alt="SQ4 Logo"> 
 
     <p>Ghibli SQ4</p> 
 
    </a> 
 
</section> 
 
<section id="QP" class="cars"> 
 
    <a href="#"> 
 
     <img src="http://glh222.github.io/Images/QPblur1.jpg" alt="QP blurred"> 
 
     <p>Quattroporte</p> 
 
    </a> 
 
</section> 
 
<section id="QPS" class="cars"> 
 
    <a href="#"> 
 
     <img src="http://glh222.github.io/Images/GTSrear1.jpg" alt="Rear Facing in the snow"> 
 
     <p>Quattroporte GTS</p> 
 
    </a> 
 
</section>

来源

2015-06-21 22:20:06

麻烦在css边界图像

回答

相关问题