将一个div相对于屏幕和一个列div进行定位

Question

3

我尝试了很长时间，但是没有成功。问题本身有点简单。

我需要让一个div从屏幕左侧开始，并结束于一个col-xx-x div的末尾，该div又位于一个row div中，而后者又位于一个container div中。

我已经使用jQuery完成了这个任务，但我正在寻找一种只使用HTML和CSS来实现它的方法。

我制作了一张图片以更好地理解：

(红色正方形是我想要的div，但这显而易见)

注意：请注意，在我的图像上，我使用了一个col-md-6 div，但col是不确定的（col-xx-x），我只使用6进行绘制。

这里是使用jQuery的代码示例:

- Claudio Bonfati

你能在问题中包含 html 和 css 文本吗？“我制作了一张图片以更好地理解：”无法使用在问题中发布的图片重现问题。 - guest271314

更新了，现在有一个fiddle。 - Claudio Bonfati

你是在尝试定位带有文本的元素吗？在 jsfiddle 上呈现的效果与问题中的图片不同吗？ - guest271314

内容是什么并不重要，重要的是它的位置。但如果你真的想知道，内容将是一个Google地图的iframe。 - Claudio Bonfati

.box 元素当前的 width 是其父元素 .col-sm-6 的 100%。您是否想要将 .box 元素的 width 增加到大于其父元素的宽度？ - guest271314

可以的。如果你想的话，你可以更改fiddle上的所有内容，只要结果与图片一样即可。 - Claudio Bonfati

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- guest271314 · Answer 1

您可以将.box元素的width调整为200％，将position设置为relative，left设置为-100％。

.box {
  width: 200%;
  border: 4px solid red;
  padding: 15px;
  position:relative;
  left:-100%;
}

的意思是：jsfiddle是一个在线的前端代码编辑器，后面的链接是一个示例代码的链接。