主页 / 问题 / 1273839
Accepted
Starina
Asked:2022-04-23 18:40:35 +0000 UTC2022-04-23 18:40:35 +0000 UTC

如何使垂直和水平文本并排

  • 772

怎么做，如下图。我试着做了，但适应性挥之不去（我为手机做了不同的缩进，但是太多了）

#vertical_text {
    font: 47px Verdana;
    color: #D7D7D7;
    transform-origin: left bottom;
    margin-left: 40px;
    padding-left: 6px;
    transform: rotate(-90deg);
}

#year70 {
    font: 900 110px Verdana;
    color: #F9AD6A;
    margin-left: -23%;
}

#horiz_text {
    font: 47px Verdana;
    color: #D7D7D7;
}

在此处输入图像描述

也许你可以做一些不同的事情？ps：不要过多地踢第一个布局：D

html

3 个回答

  1. 没有魔法。一个适用于所有浏览器的简单 CSS 解决方案：

    div {
  display: inline; position: relative; padding: 0 0 10vw 10vw;
  color: #f8ad6a; font-family: Verdana; font-weight: bold; font-size: 20vw;
  background: linear-gradient( 90deg, #f6f6f6, #f6f6f6 37vw, white 37vw, white 100%);
}

div>span {
  position: absolute;
  font-size: 8.8vw; color: #d5d5d5; font-weight: normal;
}

div>span:nth-child(1) {
  bottom: 10.5vw; left: -8vw;
  letter-spacing: -0.2vw; transform: rotate( -90deg);
}

div>span:nth-child(2) {
  bottom: 2vw; left: 11vw;
  letter-spacing: -0.05vw;
}
    <div>70лет<span>более</span><span>исследований</span><i></i></div>

    title让我们为文本添加阴影：

    div {
  display: inline; position: relative; padding: 0 0 10vw 10vw;
  color: #f8ad6a; font-family: Verdana; font-weight: bold; font-size: 20vw;
  background: linear-gradient( 90deg, #f6f6f6, #f6f6f6 38vw, white 38vw, white 100%);
  text-shadow: 4px 2px 3px rgba(150, 150, 150, 1);
}

div>span {
  position: absolute;
  font-size: 8.8vw; color: #d5d5d5; font-weight: normal;
}

div>span:nth-child(1) {
  bottom: 10.5vw; left: -8vw;
  letter-spacing: -0.2vw; transform: rotate( -90deg);
}

div>span:nth-child(2) {
  bottom: 2vw; left: 11vw;
  letter-spacing: -0.05vw;
}
    <div title="Более 70 лет исследований">70лет<span>более</span><span>исследований</span><i></i></div>

    让我们在悬停时添加一些文本着色的轻动画：

    div {
  display: inline; position: relative; overflow: hidden; padding: 0 0 10vw 10vw;
  color: #f8ad6a; font-family: Verdana; font-weight: bold; font-size: 20vw;
  background: linear-gradient( 90deg, #f6f6f6, #f6f6f6 38vw, white 38vw, white 100%);
  text-shadow: 4px 2px 3px rgba(150, 150, 150, 1); cursor: default;
}
div::before, div::after {
  content: attr(data-hover);
  display: block; position: absolute; overflow: hidden;
  top: 0; left: 10vw; right: 0; width: 0px; color: chocolate;
  transition: all 1s;
}
div:hover:before {width: 100%;}

div>span {
  position: absolute;
  font-size: 8.8vw; color: #d5d5d5; font-weight: normal;
}

div>span:nth-child(1) {
  bottom: 10.5vw; left: -8vw;
  letter-spacing: -0.2vw; transform: rotate( -90deg);
}

div>span:nth-child(2) {
  bottom: 2vw; left: 11vw;
  letter-spacing: -0.05vw;
}
    <div title="Более 70 лет исследований" data-hover="70лет">70лет<span>более</span><span>исследований</span><i></i></div>

    • 6
  2. Best Answer

    SVG 变体

    优点：

    1. 所有元素的 SVG 内部：形状、文本、绝对坐标，这使得它们之间的相对定位变得容易
    2. 在外部，svg 的行为类似于常规块、布局参与者，如果您删除 SVG 标头中的宽度、高度，那么块将变得自适应，并且块内的布局不会在小工具视口的任何大小处中断。
    3. 该文本已被搜索引擎很好地索引，如果您在它们的标签之间添加一些文本，<desc>...</desc>并且<title> ... </title>该文本将用作悬停工具提示，则效果会更好。
      4. 该应用程序是自适应的，适用于所有现代浏览器

    尝试将鼠标悬停在数字 70 上

    <style>
.container{
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 500 250" > 
            <!-- Серый прямоугольник -->
<rect x="7" y="45" width="225" height="185" fill="#F6F6F6"/>
<text transform="rotate(-90 55 212)" x="55" y="212" font-size="64px" fill="#D5D5D5"> более </text> 
  <text  x="80" y="210" font-size="56px" font-family="sans-serif" fill="#D5D5D5"> исследований </text> 
     <g>
     <title> 70 лет эффективной и неустанной научной работы </title>
     <text  x="70" y="150" font-size="130px" font-family="sans-serif" letter-spacing="-0.06em" font-weight="750" fill="#F8AD6A"> 70 лет </text>
    </g>
</svg>       
</div>

    带有 CSS 阴影的 SVG 变体

    .container{
width:75vw;
height:75vh;
}
#L70 { 
filter: drop-shadow(0px 5px 4px rgba(0, 0, 0, 0.5));
} 
.txt {
filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.3));
}
    <div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 500 250" > 
            <!-- Серый прямоугольник -->
<rect x="7" y="45" width="225" height="185" fill="#F6F6F6"/>
<g id="L70">
<text class="txt" transform="rotate(-90 55 212)" x="55" y="212" font-size="64px" fill="#D5D5D5"> более </text> 
  <text class="txt"   x="80" y="210" font-size="56px" font-family="sans-serif" fill="#D5D5D5"> исследований </text> 
     <g>
     <title> 70 лет эффективной и неустанной научной работы </title>
     <text   x="70" y="150" font-size="130px" font-family="sans-serif" letter-spacing="-0.06em" font-weight="750" fill="#F8AD6A"> 70 лет </text>
    </g>
    </g>
</svg>       
</div>

    • 6

  3. 我会添加一些我自己的有趣魔法，一个巨大的好处当然是屏幕阅读器会一口气读到这个）

    .text {
  font-family: Arial, sans-serif;
  font-weight: 500;
  position: relative;
  padding-left: 20px;
  margin: 0;
  color: #d9d9d9;
  font-size: 16px;
  line-height: 1.1;
}
.text--main {
  color: #f4ae71;
  font-size: 32px;
  line-height: 1;
}
.text-vertical {
  position: absolute;
  left: 0;
  bottom: 2px; /* Косметически поправил отступ */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
    <p class="text">
  <span class="text-vertical">более</span>
  <span class="text--main">70лет</span> 
  <br> 
  <span>исследований</span>
</p>

    • 2

相关问题