Wie man Bilder auf der gleichen Linie anordnet

Question

Ich habe diesen Code unten und ich habe jeden Trick im Buch versucht, um alle Bilder die gleichen Maße zu machen und dennoch Bootstrap reaktionsfähig zu machen. Aber es scheint, als müsste ich das eine oder das andere wählen. Also möchte ich stattdessen alle Bilder in einer Zeile ausrichten.

Ich habe ein Bild enthalten ist, was ich meine:

/* Books */ 
 

 
#books_div { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 25%; 
 
    transform: translatex(-50%); 
 
} 
 

 
#books_text { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 15%; 
 
    transform: translatex(-50%); 
 
} 
 

 
.description_one, .description_two, .description_three { 
 
    color: #9B0103; 
 
    max-width: 100%; 
 
    text-align: center; 
 
    border: 1px solid #9B0103; 
 
    border-top: none; 
 
    font-weight: bold; 
 
} 
 

 
.description_one a { 
 
    text-decoration: none !important; 
 
} 
 

 
#book_column a { 
 
    text-decoration: none !important; 
 
} 
 

 
/* End of Books */

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- Books --> 
 
    <h2 id='books_text'> We Giveaway Free Books </h2> 
 
    <div class="row" id='books_div'> 
 
     
 
     <!-- First Book --> 
 
     
 
     <div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'> 
 
       <a href='#'> 
 
        <img class='img-responsive' src='https://images.gr-assets.com/books/1472913234l/29563587.jpg' alt='' id='book_cover_one' token_id='4ce0e43b806457bbc21881748d6a50d2'> 
 
       <div class='description_one'> 
 
        5:05:12 
 
       </div> </a> 
 
      </div>    
 
             
 

 
<!-- End of First Book --> 
 

 
<!-- Second Book --> 
 

 
    <div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'> 
 
       <a href='#'> 
 
        <img class='img-responsive' src='https://images.gr-assets.com/books/1388211242l/69571.jpg' alt='' id='book_cover_two' token_id='bb8673cb597c7fc7cba7bc13d9f08a4b'> 
 
       <div class='description_two'> 
 
        6:32:14 
 
       </div> </a> 
 
      </div>    
 

 

 
<!-- End of Second Book --> 
 

 
<!-- Third Book --> 
 
    <div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'> 
 
       <a href='#'> 
 
        <img class='img-responsive' src='https://images.gr-assets.com/books/1342493368l/3636.jpg' alt='' id='book_cover_three' token_id='25ea7f6c20f1f185841ed88c9a9d2f2c'> 
 
       <div class='description_three'> 
 
        7:12:04 
 
       </div> </a> 
 
      </div>    
 
              
 
<!-- End of Third Book -->

Answer 1

Es ist keine gute Praxis Verwendung von position: absolute der Divs zu machen. Die #book_column kann

display: inline-block; 
padding: 10px; 

eingestellt werden, die die Bilder verursachen

die Mutter #books_div-text-align: center so liegt in einer Linie aufgereiht werden, dass die Liste der Bücher werden in der Mitte des Mutter angezeigt div. Die Höhe kann für #book_column festgelegt werden, sodass alle Bilder dieselbe Höhe einnehmen.

diese Geige Siehe: https://jsfiddle.net/9bd1rdcv/1/