Question

我有一点css问题。我有一个最大宽度的div。在这个div中有一个img需要放在他的div之外（到底部）。不幸的是，由于最大宽度，我无法使用绝对位置。当我使用绝对位置时，在某些时候屏幕的宽度达到最大宽度，位置绝对的img将超出右侧的div。

我知道这听起来有点混乱，所以我做了Jsfiddle: https://jsfiddle.net/te93s8h1/

这个JS小提琴显示了我遇到的问题的一个例子。我需要div外面的绿色块（在底部），但绿色块不能超出右侧的div。我怎样才能做到这一点？

我更喜欢css。

Answer 1

别介意我的问题，我想我明白你想要实现的目标。您应该在position: relative;类的样式块中添加.grid语句，如此JSFiddle中所示。

Answer 2

只需在不使用绝对位置的情况下尝试此操作。

.container {
  background-color: #00f;
  width: 98%;
  height: 100px;
  margin: auto;
  max-width: 1300px;
}

.grid {
  position: relative;  /* Added Position */
  background-color: #f00;
  width: 50%;
  margin: auto;
  min-width: 600px;
  height: 100px;
}

.block_outside_div {
  position: inherit; /* Added Position */
  background-color: #0f0;
  height: 50px;
  width: 50px;
  left: 45%;  /* 45% Percentage value for move from left */
  top: 120px; /* 120px value for move from top */
}

<div class="container">
  <div class="grid">
    <div class="block_outside_div">
    </div>
  </div>
</div>

在父div之外得到div而没有绝对位置

2 个答案: