Warum schwebt meine Spalte nicht zum linken Rand meines Containers?

Ich möchte zwei Reihen mit 3 thumb Nagelbildern auf jeder Reihe machen. Ich benutze Bootstrap. Der Behälter ist 960px mit 20px Rinnen, also 940px breit. Ich habe meinen CSS- und HTML-Code eingefügt. Was mache ich falsch? Ich habe seit einiger Zeit damit zu kämpfen. CSS-Code:Warum schwebt meine Spalte nicht zum linken Rand meines Containers?

@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-Code:

<!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>

Dies ist, was ich bekomme:

Design sollte wie folgt aussehen:

Änderungen an der Code und das Ergebnis in Inspektor:

Quelle

2016-07-28 danny taki

Ich warf Ihren Code in eine Geige und es funktioniert https://jsfiddle.net/iamnottonyy/pdcdnc0w/1/. Sind Ihre Bilder unterschiedlich groß? –

Nein, ich habe sie in Photoshop überprüft. Alle Bilder sind 300 x 215 px. (W X H) –

Ah Ich postete dies auch unten, aber wenn die Bilder in den Browser geladen werden und ich sie überprüfe, sind sie tatsächlich verschiedene Größen. Wie schränke ich sie auf die gleiche Größe ein, wie sich die Browsergröße ändert? –

Es ist schwer zu sehen, was genau das Problem ohne die Bilder ist, aber ein Problem könnte sein, dass die Bilder in verschiedenen Größen zurückkommen. Wenn dies der Fall ist, würde ich folgendes:

Wrap die Bilder in einem div mit einer bestimmten Klasse:

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

die Breite des Make div was Prozentsatz Sie den inneren img wollen jede sein und verstecken Überlauf:

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

die Breite 100% des img Marke:

.my-image{ 
    width: 100%; 
}

Aktualisiert Geige https://jsfiddle.net/iamnottony/pdcdnc0w/3/

Quelle

2016-07-28 22:16:49

Hat nicht funktioniert :(. Ich habe die Änderungen auch in Chrome-Entwickler gemacht. Ich werde ein Bild von den Änderungen der Hauptfrage hinzufügen. –

Ich habe diese Änderungen an der .thumbnail-Klasse in der Bootstrap CSS-Datei: '.thumbnail {display: block;/* padding-top: 1px * /; Rand-unten: 25px; line-height: 1,78571429; Hintergrundfarbe: #fff;/* border: 1px solid #ddd * /; border- Radius: 4px;/* -Webkit-Übergang: Grenze .2s Leichtigkeit-in-out; -o-Übergang: Grenze .2s Leichtigkeit-in-out; Übergang: Grenze .2s Leichtigkeit-in-out * /} ' –

Eigentlich Sie wissen, dass, obwohl die Thumbnails alle 300 X 215 sind, es scheint, dass der Browser die Größe der JPEG-Bilder als Reaktion auf die Größe des Browsers ändert.In Wirklichkeit, aus welchem Grund auch immer, sind die JPEGs tatsächlich unterschiedliche Größen. –

Warum schwebt meine Spalte nicht zum linken Rand meines Containers?

Antwort

Verwandte Themen