Question

我的网站上有一个Instagram部分，它可以按我想要的方式工作，但我想在其右侧添加具有背景颜色和文本的另一个div，以使它看起来像是网格的一部分，但不是！< / p>

我已经设置好了，但是在扩展浏览器时根本就不支持它了，有人可以帮助我吗？这是我的HTML和CSS，以及有关其外观的图片。

.Container-Instagram {
  margin-top: 5%;
  width: 85%;
}
.H1-Instagram {
  font-size: 48px;
  color: #d7aa44;
}
.Instagram-Title {
  background-color: #f8db74;
  position: absolute;
  margin-top: 204px;
  margin-left: 792px;
  padding: 30px;
  width: 50%;
  height: 187px;
  text-align: center;
}
.cross-text2 {
  display: inline-block;
  position: relative;
}
.cross-text2::before {
  background-color: #d7aa44;
  content: "";
  height: 4px;
  position: absolute;
  top: 37px;
  left: 4px;
  width: 100%;

  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.Container-Instagram a {
  border: 5px solid #fff;
  display: inline-block;
  line-height: 0;
  width: 20%;
}
.Container-Instagram #instafeed a:first-child {
  margin-left: 40%;
}
.Container-Instagram #instafeed a:nth-child(8n + 8) {
  margin-left: 0.05%;
}

.instagram-section {
  width: 75%;
}

<div class="Container-Instagram">
            <div class="Instagram-Title"><h1 class="H1-Instagram">Get On The <span class="cross-text2">Insta</span> Gram</h1></div>
            <div id="instafeed" class="instagram-section"></div>
        </div>

由于JS，此代码段无效，但仅用于显示我的代码。这是最终结果应该是什么样子（红色方块是instagram帖子）： Image Example

如果您想更好地了解我的意思，http://s749376357.websitehome.co.uk/就是我用来开发的网址：D谢谢

Answer 1

将margin-left:792px;上的.Instagram-Title替换为right:100px;，然后将position:relative;添加到.Container-Instagram，然后在调整大小时随之进行-但是，您仍然需要做一些工作使其完全响应。

Instafeed / html响应部分

1 个答案: