Question

我的页面上有多行容器，所以当它在小屏幕上显示时，元素会内联移动。我希望橙色条位于标题后面并稍微低于标题并填充页面的宽度。因此，我在橙色条上使用相对定位和负z-index将其推到标题下方。

我的问题是如何让背栏宽度等于屏幕的宽度，同时将其保持在持有标题的div内？

＆＃13;

.backbar_orange {
    background-color: rgb(250, 105, 0);
    height: 80px;
    width: 100%;
    position: relative;
    top: 130px;
    z-index: -1;
}

＆＃13;

<div class="container">

  <div class="row">
   <div class="col-md-6">
     
	<div class="backbar_orange"></div>
     
    <h2>Sticker</h2>		
	<p>Content here</p>
     
   </div>
   <div class="col-md-6">
     <img src="img/stckr.jpg">
   </div>
  </div>
</div>

＆＃13;

JSFiddle

我希望这是有道理的，我试图发布解释我的设计的图像。

我看到人们提到使用jQuery但肯定有一种方法可以在css中完成它吗？我没有使用jQuery的经验。任何帮助表示赞赏。

Answer 1

我不确定你到底得到了什么，宽度是我的显示器尺寸，我假设你试图在标题下添加背板，在这种情况下你可以使用填充的CSS。

然而，根据您的图像，您似乎希望宽度在排序图像旁边的列中排成一行。

在这种情况下，您可以使用此处找到的引导网格功能：http://getbootstrap.com/css/#grid

为每列内的div创建两列并设置自己的宽度和高度等。

如何使子div宽度扩展到整页

1 个答案: