Putting Elemente auf der gleichen Linie

Wie kann ich die folgenden Elemente auf der gleichen Linie? Ich weiß, es hat zu tun mit der display-Eigenschaft, aber eine, die immer stümpfe mich und kann nie scheinen, um zu arbeiten.

http://jsfiddle.net/MgcDU/4137/

HTML:

<div class="container">
  <div class="small-video-section">
    <div class="thumbnail-container">
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
    </div>
    <div class="thumbnail-container">
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
    </div>
    <div class="thumbnail-container">
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
    </div>
    <div class="thumbnail-last">
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
    </div>
  </div>
</div>

CSS:

.small-video-section {
  height: 134px;
}

.thumbnail-container {
  width: 220px;
  margin-top: 15px;
  margin-right: 20px;
  display: inline-block;
}

.thumbnail-last {
  width: 220px;
  margin-top: 15px;
  display: block;
}

Dank. 🙂

  • Versuchen Sie, diese code unten geschrieben.
InformationsquelleAutor John Smith | 2013-05-11
  1. 7

    Sie könnte verwenden Sie float: left oder float: right

    img {float: left;}

    Beachten Sie, müssen Sie clearfix, die Herr Gallagher erklärt, schön oder Folgen Sie mit jedem element, das clear: both; bekommen Sie die Ergebnisse, die Sie erwarten.

    Können Sie die position, die Sie absolut

    img {position: absolute;}

    und positionieren Sie dann nacheinander mit der left und right oder Margen

    img.image-one {left: 0: top: 0;}
img.image-one {right: 300px; top: 0;}
img.image-three {margin-left: 100px;}
/*etc etc...*/

    EDIT: habe nicht bemerkt, die divs, sollte man float left auf diejenigen, die als jemand anderes erwähnt, aber beide Optionen technisch in Ihrem Fall. Es gibt wohl ein Dutzend mehr Möglichkeiten, dies zu tun...

    • Danke. Funktioniert. 🙂
    InformationsquelleAutor jamil
  2. 3

    Ändern display:block zu display:inline-block in Ihrem .thumbnail-last Regel wird es tun.

    InformationsquelleAutor Paul Roub
  3. 0

    versuchen float: left auf der divs. Das wird jeder zu zeigen, bis in der Schlange. andere weisen, die block-Elemente einzuführen, die eine Pause

    InformationsquelleAutor DevZer0
  4. 0

    Versuchen, diesen code :- Verwenden Sie nur float:left 

    <div class="container">
      <div class="small-video-section">
        <div class="thumbnail-container"  style="float:left;height:134px;width:150px">
          <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
        </div>
        <div class="thumbnail-container" style="float:left;height:134px;width:150px">
          <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
        </div>
        <div class="thumbnail-container" style="float:left;height:134px;width:150px">
          <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
        </div>
        <div class="thumbnail-last" style="float:left;height:134px;width:150px">
          <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
        </div>
      </div>
    </div>

    Alle Ihre Codes sind ok. Aber , ich habe nur Hinzugefügt style im HTML-Teil.

    Update-link :-

    http://jsfiddle.net/MgcDU/4148/

    Seine Arbeitsmethoden in Ordnung.

    InformationsquelleAutor JDGuide
  5. 0

    Es ist eine alte post, aber es kamen bei der Suche für die Elemente auf der gleichen Linie mit bootstrap, damit ich anderen helfen.

    Boostrap hat die Inline-form-Klasse, um einige Elemente auf der gleichen Linie (es ist Links ausgerichtet).

    Bootstrap-CSS-inline-form

    • Es ist nicht eine form, die er macht, so Bootstrap grid system wäre die bessere Lösung.
    • Mit dem grid-system, es ist schwer zu zwingen, die Elemente werden auf der gleichen Zeile ohne Verwendung der Eigenschaft display
    InformationsquelleAutor yuval simhon
Schreibe einen Kommentar