Question

我想在容器中获取一个div以扩展到页面的边缘。

正如你在我的小提琴中看到的那样，我已经设法做到这一点，但是红色的“条形图”离开了页面，因此用户可以向右滚动。

我希望它能够正常运行，但红色div触及页面的一侧，不再进一步。

要记住的事情：

我现在试图保持纯HTML / CSS，
代码必须响应，
这也将在CMS中使用，因此可以添加任何长度的文本。

.container{
  background-color:grey;
}

.row{
  padding-top:30px;
  padding-bottom:40px;
}

.row_outer{
  height:50px;
  background-color:blue;
  display: block;
  float:right; 
  clear:both;
}

.text{
  display: inline-block;
}

.holder{
  width: 0px;
  float:right;
  height: 100%;
}

.bar{
  height: 50px;
  background-color:red;
  position:absolute;
  display:block;
  width:100%;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="row_outer">
    
    <div class="text">Test Text 78oo76o689o 76o 68k yuk uik</div><div  class="holder"><div class="bar">
    </div></div>	
    
    </div>
  </div>
</div>

感谢-你。

如何让div从引导容器扩展到页面的右侧？

0 个答案: