Question

我一直试图制作一个页面，其中四个响应式图像以块状排列。像第一行的两个图像和第二行的两个图像。

自从响应以来，我试图让他们在住在他们的地方时缩小。但是当我试图调整窗口大小时，它有点耍弄。

＆＃13;

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <style>
 #image1 {
 	position:relative;
 	float: left;
    padding-left: 10px;
    margin-left:250px;
	border:1px solid;
    }
  #image2 {
  	position:relative;
 	float: left;
    padding-left: 10px;
    margin-left:300px;
	border:1px solid;
	padding-bottom:10px;
    }
   #image3 {
   position:relative;
 	float: left;
    margin-left:250px;
    padding-top:10px;
	border:1px solid;
    }
  #image4 {
  position:relative;
 	float: left;
	padding-top:10px;
    padding-left: 10px;
    margin-left:300px;
	border:1px solid;

    }

＆＃13;

<div class="container">
  <h2>Image</h2>
  <p>This text is responsive too</p>
  <img class="img-responsive" src="img.png" id="image1" alt="Chania" width="150" height="150"> 
   <img class="img-responsive" src="img.png" id="image2" alt="Chania" width="150" height="150"> 
   <img class="img-responsive" src="img.png" id="image3" alt="Chania" width="150" height="150"> 
   <img class="img-responsive" src="img.png" id="image4" alt="Chania" width="150" height="150"> 
</div>

＆＃13;

非常感谢任何建议。

Answer 1

首先关闭。我看到你正在使用bootstrap。确保使用内置网格布局系统。除非您设置行和列，否则不会使用您的容器。这将处理您的大部分响应行为。

然后你需要连续设置两个图像。不确定为什么要设置图像位置。除非您将图像放在容器外面，否则您根本不需要利用这些位置。

如果你确实需要这个职位。然后父母将拥有相对属性。您要移动的孩子将被设置为绝对。 Google mdn位置了解有关这些属性的更多信息。注意：如果您未将子项的位置设置为绝对值，则该元素将保留在正常流中并忽略相对父项。

这样的事情可能会让你朝着正确的方向前进：

＆＃13;

<style>
    parent-div {
        position: relative;
    }
    child-image {
        position: absolute;
        left: 0;
        top: 0;
    }
    child-text {
        position: absolute;
        bottom: 10px;
        left: 0;
        z-index: 10; /*set text above image*/
    }
    img {
        width: 100%; /* fill to parent */
    }
</style>

<body class="container-fluid">
<div class="row"> 
    <div class="col-md-6 parent-div">
        <p class="child-text">This text is responsive too</p>
        <img class="child-image" href="" alt="">
    </div>
    <div class="col-md-6 parent-div">
        <img class="child-image" href="" alt="">
    </div>
</div><!-- End of row -->
<div class="row"> 
    <div class="col-md-6 parent-div">
        <p>This text is responsive too</p>
        <img class="child-image" href="" alt="">
    </div>
    <div class="col-md-6 parent-div">
        <img class="child-image" href="" alt="">
    </div>
</div><!-- End of row -->

</body><!-- End of page -->

＆＃13;

在调整窗口大小

1 个答案: