Question

使用绝对定位时，我无法Caused by: org.apache.hadoop.hive.ql.parse.SemanticException: Line 1:18 Cannot insert into target table because column number/types are different 'sample2': Table insclause-0 has 2 columns, but query has 3 columns.工作。在https://jsfiddle.net/jn2bs6ax/中，项目应采用尽可能小的宽度，最大宽度不能超过1000px。但这需要大约50％的宽度并包裹文字。如何使其运作？如果我将max-width设置为300px之类的大小，则可以使用，但大于当前宽度的任何内容都不会导致其扩展。

此示例仅显示了一个绝对位于项目中心下方的项目，但是我使用了max-width，transform，top，{{ 1}}和bottom来将事物相对于一个物品在所有4个方向上定位。该解决方案应适用于所有4种情况。

有一个类似的问题CSS (position:absolute + left:50% = max-width:50%)?，但答案仅适用于下方居中的情况，而不适用于所有情况，例如定位在垂直居中的项目右侧。

left

css

right

Answer 1

尝试设置display: inline-table;或display: table;

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 1000px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-table;
}

<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
</div>

Answer 2

尝试在任意位置为课程添加width: 100%;和最大宽度。

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 1000px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
</div>

Answer 3

您已经注意到，问题与left:50%有关，它将限制元素的宽度为父元素的50%。

一种克服此问题的 hacky 方法是通过添加更多填充来增加父元素的宽度，因为绝对元素会考虑填充框。然后，添加负边距以纠正添加的填充。您只需要注意溢出：

.relative {
  position: relative;
  padding:0 50%;
  margin:0 -50%;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 800px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}


.hide {
 overflow:hidden;
 height:500px;
}

<div class="hide">
<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
  <div class="absolute" style="top:200px;">Lorem ipsum dolor sit amet</div>
</div>
</div>

使用绝对定位时无法使最大宽度工作

3 个答案: