Question

让我们假设我不能改变HTML，也不能使用JavasScript。假设#content_actual的位置取决于#element的高度。 #element具有灵活的高度。

这个问题有解决方案吗？

HTML：

<div id="content">
  <div id="element">ABCDE</div>
  <div id="content_actual">FGHIJ</div>
</div>

CSS：

#content {
  width:960px;
  margin: 0 auto;
}

#element {
// width: 100% of body width
// position: everything but position absolute or fixed
}

Answer 1

与Paulie_D相似（显然我们正在共享脑电波），但这会使用百分比来抵消容器宽度。不知道这会得到多少支持：

https://jsfiddle.net/7w2cwqfq/4/

SELECT 
  id,
  col2,
  date1,
  CASE WHEN date1 = '1900-01-01' THEN (SELECT MAX(date1) FROM YourTable yt2 WHERE yt2.id = yt1.id) ELSE date1 END AS date2
FROM YourTable yt1

Answer 2

相对定位，视口单元和calc的组合。

Codepen Demo

注意：只要视口小于容器宽度，就会中断。此时将需要媒体查询。

＆＃13;

#content {
  width: 480px; /* numbers changed for this Snippet */
  margin: 0 auto;
  background: green;
  padding: 50px;
}
#element {
  height: 50px;
  line-height: 50px;
  width: 100vw;
  position: relative;
  right: calc(50vw - 240px); /* second value 50% of container width */
  background: lightblue;
}

＆＃13;

<div id="content">
  <div id="element">ABCDE</div>
  <div id="content_actual">FGHIJ</div>
</div>

＆＃13;

还应该注意，容器不能使用overflow:hidden来使用此技术。

CSS：在不使用position的情况下使内部div 100％的体宽：绝对 - 是否可能？

2 个答案: