Question

我想在图像下方添加一个div，它会在图像缩小或放大时对图像做出响应。我尝试在图像下面添加div，但它不响应图像缩放。我将如何完成这样的事情：

这是我正在使用的代码：

#books_div {
  position: absolute;
    left: 50%;
    top: 25%;
    transform: translatex(-50%);
}

#books_text {
  position: absolute;
    left: 50%;
    top: 15%;
    transform: translatex(-50%);
}

#books_div img {
  margin-bottom: 20px !important;
}

<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'>
            <div class="col-lg-3 col-sm-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1474154022l/3.jpg" alt=""  style="width:200px;height:276px;">
                </a>
            </div>
            <div class="col-lg-3 col-sm-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1328767473l/10713286.jpg" alt="" style="width:200px;height:276px;">
                </a>
            </div>
            <div class="col-lg-3 col-sm-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1394566113l/20454074.jpg" alt="" style="width:200px;height:276px;">
                </a>
            </div>
            <div class="col-lg-3 col-md-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1460309528l/44652.jpg" alt="" style="width:200px;height:276px;">
                </a>
            </div>
        </div>
    <!-- End of Books -->

Answer 1

你想要这样吗？我刚刚添加了一个名为div的新description，删除了margin-bottom: 20px !important并将其description。

请注意，当您的父级div的宽度为width of parent > image width时，div将具有父级width。

<强>更新

我已将max-width: 200px添加到.description。

＆＃13;

#books_div {
  position: absolute;
    left: 50%;
    top: 25%;
    transform: translatex(-50%);
}

#books_text {
  position: absolute;
    left: 50%;
    top: 15%;
    transform: translatex(-50%);
}

/*
#books_div img {
  margin-bottom: 20px !important;
}
*/

.description {
  background-color: red;
  margin-bottom: 20px;
  max-width: 200px;
}

＆＃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'>
            <div class="col-lg-3 col-sm-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1474154022l/3.jpg" alt=""  style="width:200px;height:276px;">
                </a>
                <div class="description">test</div>
            </div>
            <div class="col-lg-3 col-sm-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1328767473l/10713286.jpg" alt="" style="width:200px;height:276px;">
                </a>
                <div class="description">test</div>
            </div>
            <div class="col-lg-3 col-sm-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1394566113l/20454074.jpg" alt="" style="width:200px;height:276px;">
                </a>
                <div class="description">test</div>
            </div>
            <div class="col-lg-3 col-md-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1460309528l/44652.jpg" alt="" style="width:200px;height:276px;">
                </a>
                <div class="description">test</div>
            </div>
        </div>
    <!-- End of Books -->

＆＃13;

Answer 2

请参阅下面的代码。只需在标签内写一个div。

＆＃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'>
            <div class="col-lg-3 col-sm-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1474154022l/3.jpg" alt=""  style="width:200px;height:276px;">
                    <div class="name">Book Name</div>
                </a>
            
            </div>
            <div class="col-lg-3 col-sm-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1328767473l/10713286.jpg" alt="" style="width:200px;height:276px;">
                    <div class="name">Book Name</div>
                </a>
            </div>
            <div class="col-lg-3 col-sm-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1394566113l/20454074.jpg" alt="" style="width:200px;height:276px;">
                    <div class="name">Book Name</div>
                </a>
            </div>
            <div class="col-lg-3 col-md-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1460309528l/44652.jpg" alt="" style="width:200px;height:276px;">
                     <div class="name">Book Name</div>
                </a>
            </div>
        </div>
    <!-- End of Books -->

＆＃13;

<form action = "test.php" method="post">
 <input type="text" name="name" />
 <textarea name="item[]" rows="4" cols="90" maxlength="500" ></textarea>
 <input id="submitButton" type="submit" name="submit" class="submit action-    button" value="Verzenden" ></textarea>
</form>

＆＃13;

Answer 3

如果我得到您的需要，这可能是一种可接受的方法：

您应该将容器（div）设置为父级，它将定义绝对宽度。然后，它将有两个孩子（图像和描述），您可以根据需要设置它们：

<div class="col-lg-3 col-sm-6 portfolio-item">
    <div style="width:100%;"><a href="#">
        <img class='img-responsive' src="https://images.gr-assets.com/books/1474154022l/3.jpg" alt=""  style="width:200px;height:276px;">
    </a>
    </div>
    <div style="width:100%; background-color:red;" class="description">test</div>
</div>

意识到，我在自己的html标签中设置了css样式，你可以在Css类中创建或设置它们。

希望它有所帮助。如果您有任何疑问，请告诉我。

如何在图像Bootstrap下添加div

3 个答案: