Question

这就是我要使用3张图片（2个正方形和1个三角形）实现的目标：

此外，一旦视口大小调整为移动设备的屏幕尺寸，则三角形上方应有绿色正方形，三角形下方应有红色正方形。即响应式设计。

但是，我在这里面临一些问题。我无法在不隐藏三角形的一部分的情况下将绿色正方形放置在三角形的列边界“上方”（奇怪的是，对红色正方形而言，它的工作足够好！）：

在上面的图像上您看到的是，尽管我正确设置了z索引，但是绿色正方形的一部分隐藏在三角形的图像后面：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="testCss.css">
</head>
<body>
    <div class="container">                                                                                     
        <div class="row">
            <div class="col-md-3 stack-center">
                <img src="squareGreen.png" id="test1"/>                                 
            </div>
            <div class="col-md-6 stack-center">
                <img src="triangle.png" id="test2"/>
            </div>
            <div class="col-md-3 stack-center">
                <img src="squareRed.png" id="test3"/>                                   
            </div>
        </div>                                                                                                  
    </div>
</body> 
</html>

CSS：

#test1
{
    margin-left: 150px;
    z-index:1; 
}

#test2
{
    z-index:0; 
}

#test3
{
    margin-left: -150px;
    z-index:1;
}

调整大小时，红色方块不再位于中间，绿色方块位于中间：

因此，作为总结：

如何避免绿色正方形被剪掉并使其越过三角形的列的边界？
调整窗口大小时如何确保所有内容正确居中？

这些是我正在使用的图像：https://imgur.com/a/O3Oqw3X

谢谢

Answer 1

如何避免绿色正方形被切掉并使其越过三角形的列的边界？

使背景透明而不是白色。（在下面的示例中看不到。）

调整窗口大小时如何确保所有内容正确居中？

使用.text-center代替.stack-center。据我所知，.stack-center不是有效的Bootstrap助手类。
请不要在图像上应用边距。在这种情况下，中间列（.col-m-）的断点为720px。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');

@media (min-width: 720px) {
  #test1 {
    margin-left: 150px;
  }
  #test3 {
    margin-left: -150px;
  }
}

<div class="container">
  <div class="row">
    <div class="col-md-3 text-center">
      <img src="https://i.imgur.com/ojcl7QG.png" id="test1">
    </div>
    <div class="col-md-6 text-center">
      <img src="https://i.imgur.com/8lju1g6.png" id="test2">
    </div>
    <div class="col-md-3 text-center">
      <img src="https://i.imgur.com/YF7NKJM.png" id="test3">
    </div>
  </div>
</div>

如何跨列重叠图像？

1 个答案: