Question

我有一个comp代码，这个特定领域正变成了一个真正的痛苦。如果你查看comp，你可以看到文本的第一行和最后一行在容器外面约占50％。

我可以使用CSS中的精确数学来实现这一点，但正如您可以想象的那样，当文本包含在不同的浏览器大小上时，数学需要更改才能保持设计的完整性。这很快就会成为媒体查询的噩梦。

是否有更好的方法来实现此效果，同时在浏览器调整大小时保持设计完好无损？

＆＃13;

body {
  background-color: black;
}

.container {
  width: 500px;
  height: 190px;
  padding: 0 50px;
  background-color: gray;
}

p {
  color: white;
  background-color: green;
  position: relative;
  top: -10%;
  font-size: 32px;
  line-height: 1.15;
}

＆＃13;

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quo voluptatibus enim doloremque ab illum nam consequuntur nihil, vel magni ipsa maxime numquam odio explicabo!</p>
</div>

＆＃13;

Answer 1

我已经使用绝对定位来调整浏览器窗口的大小。

＆＃13;

body {
  background-color: black;
}

.container {
  position:absolute;
  left:30px;
  right:30px;
  top:30px;
  bottom:30px;
  background-color: gray;
}

p {
  color: white;
  background-color: green;
  position: absolute;
  font-size:30px;
  top:-50px;
  bottom:-50px;
  right:50px;
  left:50px;
}

＆＃13;

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quo voluptatibus enim doloremque ab illum nam consequuntur nihil, vel magni ipsa maxime numquam odio explicabo!</p>
</div>

＆＃13;

Answer 2

我无法在代码段中使用它，但这是我在本地工作的内容。

尽管使用::before ......

的CSS：

    body {
        background-color: black;
    }

    .container {
        width: 500px;
        height: 190px;
        padding: 0 50px;
    }

    p {
        color: white;
        /* background-color: green; */
        position: relative;
        font-size: 32px;
        line-height: 1.15;
    }

        p::before {
            content: ' ';
            background-color: gray;
            position: absolute;
            top: 0.5em;
            bottom: 0.5em;
            left: 0;
            right: 0;
            font-size: 32px;
            z-index: -1;
        }

HTML：

<div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quo voluptatibus enim doloremque ab illum nam consequuntur nihil, vel magni ipsa maxime numquam odio explicabo!</p>
</div>

Answer 3

只需将margin:0; padding:0; position:absolute添加到p，然后将overflow:auto;添加到.container，以便在增加p内容时滚动。

Codepin

body {
  background-color: #fff;
}

.container {
  width: 500px;
  height: 190px;
  padding: 0 50px;
  background-color: #444;
  position:relative;
  overflow:auto;
}

p {
  color: white;
  margin:0;
  padding:0;
  background-color: #777;
  position: absolute;
  font-size: 32px;
  line-height: 1.15;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. quo vptatibus enim doloremque ab illum nam equuntur, vel magni ipsa maxime numquam odio explicabo!</p>
</div>

段落在父容器中的定位

3 个答案: