时间戳

首页 > 解决方案 > 如何解决这个问题？旋转的 div 与背景颜色、相同的行高和适合内容的宽度相结合

html - 如何解决这个问题？旋转的 div 与背景颜色、相同的行高和适合内容的宽度相结合

问题描述

我希望文本行高始终具有相同的距离！我只想重新创建 Instagram 故事的外观描述。

不幸的是，我的 CSS 中的“fit-content”选择器无法正常工作 - 与“display: block;”一起使用 选择器和行高距离并不总是如您所见。

对改进我的代码或完全改变 CSS 结构的宝贵帮助？（请小提琴回答）

html, body{margin:0;}

.cover{  background: url("https://static.vibe.com/files/2017/06/maxresdefault-1-1497716219-compressed.jpg") fixed center;padding:2rem;box-sizing:border-box;}

.cover-2{  background: url("https://thimk.files.wordpress.com/2010/01/source-june-1998-105_1.jpg") fixed center;
  background-size:cover;
  padding:5rem;box-sizing:border-box;}

.header { 
  background-color: red;
  color:white;
  border-radius:5px;  
  display:inline-block;
}


p{
  margin:1px;
  font-family:helvetica;font-weight:bold; }

#border-box { 
 display: block;
 width: fit-content;
 padding:4px;
  font-size:5vw;
  -ms-transform: rotate(5deg); /* IE 9 */
  -webkit-transform: rotate(5deg); /* Safari */
  transform: rotate(5deg);}

#border-box-2 { 
 display: block;
 text-align:right;
 width: fit-content;
 padding:4px;
  font-size:4vw;  
  background:white;
  color:black;
  -ms-transform: rotate(-5deg); /* IE 9 */
  -webkit-transform: rotate(-5deg); /* Safari */
  transform: rotate(-5deg);}

<section class="cover">
<div class="header" id="border-box"><p>This paragraph the content.</p></div>
<br>
<div class="header" id="border-box"><p>In the first div here</p></div>
<br>
<div class="header"id="border-box"><p>This look like this</p></div>
<br>
<div class="header" id="border-box"><p>In the first demo</p></div>
<br>
<div class="header" id="border-box"><p>This paragraph the content.</p></div>
<br>
<div class="header" id="border-box"><p>In the first div here</p></div>
<br>
<div class="header" id="border-box"><p>This look like this</p></div>
<br>
<div class="header"id="border-box"><p>In the first demo</p></div>
<br>
</section>
<section class="cover-2">
<div class="header" id="border-box-2"><p>This paragraph the content.</p></div>
<br>
<div class="header" id="border-box-2"><p>In the first div here</p></div>
<br>
<div class="header" id="border-box-2"><p>This look like this</p></div>
<br>
<div class="header" id="border-box-2"><p>In the first demo</p></div>
<br>
<div class="header" id="border-box-2"><p>This paragraph the content.</p></div>
<br>
<div class="header" id="border-box-2"><p>In the first div here</p></div>
<br>
<br>
</section>

看看我的小提琴： https ://jsfiddle.net/CAT999/hg2op0zu/

标签： htmlcss

解决方案

调整transform-origin并使其离开，您可以简化代码，如下所示：

html,
body {
  margin: 0;
}

.cover {
  background: url("https://static.vibe.com/files/2017/06/maxresdefault-1-1497716219-compressed.jpg") fixed center;
  padding: 2rem;
  box-sizing: border-box;
}

.cover-2 {
  background: url("https://thimk.files.wordpress.com/2010/01/source-june-1998-105_1.jpg") fixed center;
  background-size: cover;
  padding: 5rem;
  box-sizing: border-box;
}

p {
  background-color: red;
  color: white;
  border-radius: 5px;
  display: table; /* instead of fit-content */
  margin: 5px 5px 1vw; /* control the distance using margin-bottom*/
  font-family: helvetica;
  font-weight: bold;
  padding: 4px;
  font-size: 5vw;
  transform: rotate(5deg);
  transform-origin: left;
}


.cover-2 p {
  background: white;
  transform: rotate(-5deg);
  color:#000;
}
<section class="cover">
  <p>This paragraph the content.</p>

  <p>In the first div here</p>

  <p>This look like this</p>

  <p>In the first demo</p>

  <p>This paragraph the content.</p>

  <p>In the first div here</p>

  <p>This look like this</p>

  <p>In the first demo</p>
</section>

<section class="cover-2">
  <p>This paragraph the content.</p>

  <p>In the first div here</p>

  <p>This look like this</p>

  <p>In the first demo</p>

  <p>This paragraph the content.</p>

  <p>In the first div here</p>

</section>

推荐阅读