Question

我在下面有这个代码，并且我已经尝试了书中的每一个技巧，使所有图像具有相同的尺寸，并且仍然使其具有Bootstrap响应。但似乎我必须选择其中一个。 所以我想在一行上排列所有图像。

我已经包含了一张显示我的意思的图片：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

display: inline-block;
padding: 10px;

将导致图像排成一行

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

请参阅此小提琴：https://jsfiddle.net/9bd1rdcv/1/

如何在同一行上排列图像

1 个答案: