爲什麼我的色譜柱不能浮到我的容器的左邊緣？

我想在每一行上製作兩行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實際上是不同的大小。 –

爲什麼我的色譜柱不能浮到我的容器的左邊緣？

回答

相關問題