为什么我的色谱柱不能浮到我的容器的左边缘？

我想在每一行上制作两行3个缩略图图片。我正在使用Bootstrap。该容器是960像素，20像素水槽，940像素宽。我已经包含了我的CSS和HTML代码。我究竟做错了什么？我一直在为此奋斗一段时间。 CSS代码：为什么我的色谱柱不能浮到我的容器的左边缘？

@font-face { font-family: 'Helvetica Neue'; src: url(../fonts/HelveticaNeue.ttf); } 

body { border-top:10px solid #fb6938; } 
header { border-bottom: 1px solid #e5e5e5; } 
header h1 a { display: block; width: 172px; height: 25px; background: url(../img/Logo.png) no-repeat; } 
header h1 { margin: 26px 24px 28px 0; } 
header h2 {font-weight: normal !important; margin-top: 28px; line-height: 25px; font-family: "Helvetica Neue"; font-size: 14px; color: #7b7b7b; } 
header ul { list-style-type: none;} 

nav a { display: inline-block; padding: 0 9px; border-right: 2px solid #e5e5e5; border-left: 2px solid #e5e5e5; font: italic 14px Georgia, serif; } 
nav ul { margin: 0;} 
nav ul.list-inline li { padding: 0; line-height: 79px;} 
nav ul :first-child a { border: none; } 
nav ul :last-child a { border: none; } 

footer { padding-top: 28px; padding-bottom: 28px; border-top: 1px solid #e5e5e5; } 
footer nav a { font: normal 11px Arial, sans-serif; } 
footer nav ul.list-inline li { line-height: 25px; } 

section h1 { font-family: Georgia; font-size: 30px; font-style: italic; color: #000; line-height: 42px; } 
img { border-bottom: 10px solid; color: #fb6938; } 
section li { color: #ff6b39; } 
article { padding-bottom: 30px; border-top: 5px solid #eee;} 
article.intro { border-top: none; border-bottom: 5px solid #eee; } 

ul.thumbnails { padding: 0px; margin: 0px; } 
li.thumbnail:first-child { padding-left: 0px !important; } 
li.thumbnail:nth-child(4) { padding-left: 0px !important; } 
li.thumbnail:nth-child(4) { margin-bottom: 39px; }

HTML代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Home template</title> 
    <link rel="stylesheet" href="css/bootstrap.min.css"/> 
    <link href="css/theme.css" rel="stylesheet"/> 
    <meta charset="utf-8" /> 
</head> 
<body> 
    <header> 
     <div class="container"> 
     <div class="row"> 
     <hgroup class="clearfix col-sm-8"> 
      <h1 class="pull-left"><a class="text-hide " href="/" title="visit the Mumbo home page">Mumbo!</a></h1> 
      <h2 class="pull-left">Powered by Jeffrey Way Industries</h2> 
     </hgroup> 
     <nav class="col-sm-4"> 
      <ul class="list-inline pull-right"> 
       <li><a href="#" title="About">About</a></li> 
       <li><a href="#" title="Portfolio">Portfolio</a></li> 
       <li><a href="#" title="Contact">Contact</a></li> 
      </ul> 
     </nav> 
    </div> 
    </div> 
    </header> 
<section role="main"> 
    <div class ="container"> 
    <div class="row"> 
     <h1 class="col-md-8">Take a look at our work to see what we mean</h1> 
     <div class="col-md-4"> 
    <ul class="list-inline"> 
     <li><a href="#" title="Facebook">Facebook</a></li> 
     <li><a href="#" title="Vimeo">Vimeo</a></li> 
     <li><a href="#" title="Last.fm">Last.fm</a></li> 
     <li><a href="#" title="LinkedIn">LinkedIn</a></li> 
     <li><a href="#" title="Dribbble">Dribbble</a></li> 
    </ul> 
    </div> 
     </div> 
     <img alt="A big image!" src="img/hero.png" /> 
     <article class="intro"> 
      <h1>Risus portacon vestibulum posuere</h1> 
      <div class="row"> 
      <p class="col-md-8">Cray sustainable <a href="#" title="A link!"> vegan post-ironic</a> mixtape. 8-bit sustainable sed put a bird on it keytar fingerstache et, ennui street art proident wayfarers viral ethnic. Eu craft beer anim, keffiyeh chambray occaecat jean shorts hella selvage keytar butcher vice in. American apparel pour-over master cleanse, fingerstache etsy qui umami dreamcatcher twee.</p> 
      <div class="col-md-4"> 
      <ul class="pull-right"> 
       <li><a href="#" title="A link">Cray sustainable vegan</a></li> 
       <li><a href="#" title="A link">Chambray occaecat jean shorts</a></li> 
       <li><a href="#" title="A Link">Hella selvage</a></li> 
       <li><a href="#" title="A link">Over master cleanse</a></li> 
      </ul> 
      </div> 
       </div> 
     </article> 
    <h1>Take a look at our work to see what we mean</h1> 
    <ul class="thumbnails"> 
     <li class="col-md-4 thumbnail text-center"> 
       <img alt="A thumbnail" src="img/thumb1.png"/> 
      <h2>Purus Egestas Fusce</h2> 
       <p> 
        Cras justo odio, dapibus ac facilisis 
        egestas eget quam. 
       </p> 
     </li> 
     <li class="col-md-4 thumbnail text-center"> 
      <img alt="A thumbnail" src="img/thumb2.png"/> 
      <h2>Purus Egestas Fusce</h2> 
      <p> 
       Cras justo odio, dapibus ac facilisis 
       egestas eget quam. 
      </p> 
     </li> 

     <li class="col-md-4 thumbnail text-center"> 
       <img alt="A thumbnail" src="img/thumb3.png"/> 
      <h2>Purus Egestas Fusce</h2> 
      <p> 
       Cras justo odio, dapibus ac facilisis 
       egestas eget quam. 
      </p> 
     </li> 
     <li class="col-md-4 thumbnail text-center"> 
      <img alt="A thumbnail" src="img/thumb4.png"/> 
      <h2> 
       Purus Egestas Fusce </h2> 
      <p> 
       Cras justo odio, dapibus ac facilisis 
       egestas eget quam. 
      </p> 
     </li> 
     <li class="col-md-4 thumbnail text-center"> 
       <img alt="A thumbnail" src="img/thumb5.png"/> 
       <h2>Purus Egestas Fusce</h2> 
       <p> 
        Cras justo odio, dapibus ac facilisis 
        egestas eget quam. 
       </p> 
     </li> 
     <li class="col-md-4 thumbnail text-center"> 
       <img alt="A thumbnail" src="img/thumb6.png"/> 
      <h2>Purus Egestas Fusce</h2> 
      <p> 
       Cras justo odio, dapibus ac facilisis 
       egestas eget quam. 
      </p> 
     </li> 
    </ul> 
</div> 
<div class="container"> 
<article> 
    <h1>Ornare Tristique Adipiscing Dolor</h1> 
    <div class="row"> 
     <p class="col-md-8">C ray sustainable vegan post-ironic mixtape. 8-bit sustainable sed put a bird on it keytar fingerstache et, ennui street art proident wayfarers viral ethnic. Eu craft beer anim, keffiyeh chambray occaecat jean shorts hella selvage keytar butcher vice in. American apparel pour-over master cleanse, fingerstache etsy qui umami dreamcatcher twee.</p> 
     <div class="col-md-4"> 
     <ul class="pull-right"> 
      <li><a href="#" title="A link">Cray sustainable vegan</a></li> 
      <li><a href="#" title="A link">Chambray occaecat jean shorts</a></li> 
      <li><a href="#" title="A link">Hella selvage</a></li> 
      <li><a href="#" title="A link">Over master cleanse</a></li> 
     </ul> 
    </div> 
    </div> 
</article> 
</div> 
</section> 
    <footer> 
     <div class="container"> 
     <div class="row"> 
     <small class="col-md-8">&copy; 2012 All Rights Reserved. Powered by Jeffrey Way Industries</small> 
    <nav class="col-md-4"> 
     <ul class="list-inline"> 
      <li><a href="#" title="About">About</a></li> 
      <li><a href="#" title="Portfolio">Portfolio</a></li> 
      <li><a href="#" title="Contact">Contact</a></li> 
     </ul> 
    </nav> 
    </div> 
</div> 
</footer> 
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> 
</body> 
</html>

这就是我得到：

设计应该是这样的：

更改到代码和结果在检查员：

来源

2016-07-28 danny taki

我把你的代码放到了一个小提琴中，它的工作方式是https://jsfiddle.net/iamnottony/pdcdnc0w/1/。你的图片尺寸不同吗？ –

不，我在photoshop中检查过它们。所有的图像是300×215像素。（W×H） –

啊我也在下面发布了这个，但是当图像在浏览器中加载并检查它们时，它们实际上是不同的大小。如何将它们限制为与浏览器大小更改相同的大小？ –

没有图像很难确切地发现问题所在，但有一个问题可能是图像以不同的尺寸返回。如果是这样的话，我会做到以下几点：

<div class = "img-container"> 
    <img alt="A thumbnail" src="img/thumb1.png" class = "my-image"/> 
</div

做出力所能及的百分比你想要的内IMG div的宽度设置为隐藏任何：

包裹在一个div与给定类图像溢出：

.img-container{ 
    width: 100%; /*Change this to whatever width you want*/ 
    overflow: hidden; 
}

充分利用IMG的宽度100％：

.my-image{ 
    width: 100%; 
}

更新小提琴https://jsfiddle.net/iamnottony/pdcdnc0w/3/

来源

2016-07-28 22:16:49

没有工作:(我也对Chrome开发者进行了修改，我将添加主要问题更改的图片 –

我确实对bootstrap css文件中的.thumbnail类进行了以下更改： '.thumbnail {display：block;/* padding-top：1px * /; margin-bottom：25px; line-height：1.78571429; background-color：#fff;/* border：1px solid #ddd * /; border- radius：4px;/* -webkit-transition：边界.2s缓出; -o-transition：边界.2s缓出; transition：边界.2s缓出* *} –

实际上你知道尽管缩略图都是300X215，但似乎浏览器正在改变jpeg图像的大小以响应浏览器的大小。实际上，无论如何，jpeg实际上是不同的大小。 –

为什么我的色谱柱不能浮到我的容器的左边缘？

回答

相关问题