排列在固定位置，响应的图像，同时调整窗口

我一直试图让一个页面有四个响应图像它布置在块。类似于第一排的两个图像和第二排的两个图像。排列在固定位置，响应的图像，同时调整窗口

而且，由于响应我试图使他们住的地方，而他们收缩。但它有点杂耍，而我试图调整窗口的大小。

<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 { 
 
    \t position:relative; 
 
    \t float: left; 
 
    padding-left: 10px; 
 
    margin-left:250px; 
 
\t border:1px solid; 
 
    } 
 
    #image2 { 
 
    \t position:relative; 
 
    \t float: left; 
 
    padding-left: 10px; 
 
    margin-left:300px; 
 
\t border:1px solid; 
 
\t padding-bottom:10px; 
 
    } 
 
    #image3 { 
 
    position:relative; 
 
    \t float: left; 
 
    margin-left:250px; 
 
    padding-top:10px; 
 
\t border:1px solid; 
 
    } 
 
    #image4 { 
 
    position:relative; 
 
    \t float: left; 
 
\t padding-top:10px; 
 
    padding-left: 10px; 
 
    margin-left:300px; 
 
\t border:1px solid; 
 

 
    }

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

任何建议是极大的赞赏..

来源

2017-02-05 harishk

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

然后，你需要在一排设置两个图像。不确定为什么要设置图像位置。除非你让图像到达容器外，否则你不需要利用这些位置。

如果你确实需要这个职位。那么父母将拥有相关财产。您想要移动的孩子将被设置为绝对。 Google mdn职位，了解更多关于房产的信息。注意：如果您没有将孩子的位置设置为绝对位置，那么该元素将保持在正常流程中并忽略相对父级。

像这样的东西可能让你在正确的方向前进：

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

来源

2017-02-05 17:11:38

为什么我们不能调整图像大小和位置的margin-top/left样式标签？ – harishk

您可以......但是如果您了解HTML元素使用的框模型。您意识到边距崩溃，位置会从页面流中移除元素。这可能会导致一堆其他职位问题，重叠等问题。这可能会给您带来很多问题。使用你的结构来建立网站，使用边距和填充来调整网站。 –

此外，响应行为应该由结构来处理，否则您将编写大量媒体查询以强制在不同设备上正确放置元素。你有引导，这正是它的目的。响应式结构。 –

排列在固定位置，响应的图像，同时调整窗口

回答

相关问题