css - 如何在同一行上排列图像

Question

我在下面有这段代码，我已经尝试了书中的所有技巧来使所有图像具有相同的尺寸并仍然使它成为 Bootstrap 响应式。但似乎我必须选择其中之一。 所以我想将所有图片排成一行。

我附上了一张图片来说明我的意思:

/* 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

在 div 上使用 position: absolute 不是一个好习惯。 #book_column 可以设置为

display: inline-block;
padding: 10px;

这将使图像排成一行

将父级 #books_div 设置为 text-align: center 以便书籍列表显示在父级 div 的中心。可以为#book_column 设置高度，以便所有图像占据相同的高度。

引用这个 fiddle :https://jsfiddle.net/9bd1rdcv/1/