Question

有效地，我正在尝试将内部段落元素（ols_bin1 = lmList(z_skillvalue ~ z_gdp | name, data = bin_1) invoke(stargazer, c(ols_bin1))）从p div（蓝色框）内移动/放置到.box div（蓝色框）在下面的小提琴中：

.box

html, body {
  margin: 0;
}

.box {
  height: 200px;
  width: 400px;
  background: aqua;
  color: black;
}

我的预期输出是：

<div class="container">
  <h4>Box heading</h4>
  <div class="box">
    <div class="contents">
      <p>This is some awesome text, which is inside the box</p>
      <p>This is also another great paragraph that is better than any book ever written</p>
    </div>
  </div>
</div>

html,
body {
  margin: 0;
}

.box {
  height: 200px;
  width: 400px;
  background: aqua;
  color: black;
}

.contents {
  position: relative;
  top: -50px;
}

但是，在上面的代码段中，我将段落元素实际放置在了蓝色框（<div class="container"> <h4>Box heading</h4> <p>This is some awesome text, which is inside the box</p> <p>This is also another great paragraph that is better than any book ever written</p> <div class="box"> <div class="contents"></div> </div> </div> div）上方。有没有一种方法可以使用css从基本上方的蓝色框中移动段落元素。

我尝试使用.box属性或给position设置负的页边距，但是，这并没有增加文本上方的空间，并导致标题和/或标题重叠蓝色框。

注意：框中的段落可以是任意长度，所以我不知道段落的高度和偏移量。

Answer 1

您可以考虑将position:relative用于content元素及其容器，并使用相同数量的像素：

body {
  margin: 0;
}

.box {
  height: 200px;
  width: 400px;
  background: aqua;
  color: black;
  position: relative;
  top: 110px;
}

.contents {
  position: relative;
  top: -110px;
}

<div class="container">
  <h4>Box heading</h4>
  <div class="box">
    <div class="contents">
      <p>This is some awesome text, which is inside the box</p>
      <p>This is also another great paragraph that is better than any book ever written</p>
    </div>
  </div>
</div>

或考虑采用更动态的翻译方式：

body {
  margin: 0;
}

.box {
  height: 200px;
  width: 400px;
  background: aqua;
  color: black;
  transform:translateY(40%); /*use 100% if height auto*/
}

.contents {
  transform:translateY(-100%);
}

<div class="container">
  <h4>Box heading</h4>
  <div class="box">
    <div class="contents">
      <p>This is some awesome text, which is inside the box</p>
      <p>This is also another great paragraph that is better than any book ever written</p>
    </div>
  </div>
</div>

Answer 2

您可以从移动设备上的.box中删除样式，然后将其添加到.content::after中。这将允许各段中的任何内容，并相应地增加。

html, body {
  margin: 0;
}

.box,
.contents::after {
  height: 200px;
  width: 400px;
  background: aqua;
  color: black;
}


/* Mobile only styles */
.box {
  height: auto;
  width: auto;
  background: none;
}

.contents::after {     
  content: ''; 
  display: block;
}

<div class="container">
  <h4>Box heading</h4>
  <div class="box">
    <div class="contents">
      <p>This is some awesome text, which is inside the box</p>
      <p>This is also another great paragraph that is better than any book ever written</p>
    </div>
  </div>
</div>

使用CSS将元素移出div

2 个答案: