响应文本标题

我想让文本标题响应。正如您在3210中看到的，标题是“The Swift List”。我怎样才能让单词“THE”和“LIST”保持在单词“SWIFT”的边缘？我设法在正常的屏幕尺寸下这样做，但是当我改变屏幕尺寸时，它不像以前那样保持（在“SWIFT”单词的边缘）。响应文本标题

对于那些不想在新选项卡中打开的人。我写的代码：

HTML

<p><span class="wordThe">THE</span> 
<br><span class="textSwift">SWIFT</span> 
<br><span class="wordList">LIST</span>

.carInfo { 
 
    background: #05196b; 
 
    height: 291px; 
 
    color: #fff; 
 
    padding: 15px 50px; 
 
} 
 
.wordThe { 
 
    font-weight: bold; 
 
    color: #ff1414; 
 
    font-size: 2.5em; 
 
    padding-left: 12%; 
 
} 
 
.textSwift { 
 
    padding-left: 24%; 
 
    font-style: italic; 
 
    font-size: 4.5em; 
 
    font-weight: bold; 
 
    color: #fff; 
 
    line-height: 0.5; 
 
} 
 
.wordList { 
 
    font-weight: bold; 
 
    color: #ff1414; 
 
    font-size: 2.5em; 
 
    padding-left: 67%; 
 
} 
 
.textAtRight { 
 
    text-align: justify; 
 
    direction: rtl; 
 
    clear: both; 
 
    float: right; 
 
    letter-spacing: 1.5px; 
 
}

<div class="row"> 
 
    <div class="col-md-6"> 
 
    <div class="carInfo"> 
 
     <p><span class="wordThe">THE</span> 
 
     <br><span class="textSwift">SWIFT</span> 
 
     <br><span class="wordList">LIST</span> 
 
     <span class="textAtRight"><br>Lorem ipsum dolor sit amet 
 
     <br>Consectetur adipisicing elit 
 
     <br>dolor in reprehenderit in voluptate 
 
     <br>velit esse cillum dolore eu 
 
     <br>proident, sunt in culpa qui officia</span></p> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-07-27 Erol Aliyev

你可以添加文本的scrn.shot与你真正想要的确切位置吗？ – Vishnu

@Vishnu https://snag.gy/KgPQL8.jpg - 这是我想如何使文字具有准确的位置。 –

利用pseudo elements和data-attributes

CSS

.carInfo { 
    background: #05196b; 
    height: 291px; 
    color: #fff; 
    padding: 15px 50px; 
    text-align:center; 
} 

.textSwift { 
    font-style: italic; 
    font-size: 4.5em; 
    font-weight: bold; 
    color: #fff; 
    line-height: 0.5; 
    display:inline-block; 
    position: relative; 
    padding:3.5rem 0; 
} 

.textSwift::before{ 
    content:attr(data-before); 
    position: absolute; 
    font-weight: bold; 
    color: #ff1414; 
    font-size: 3.5rem; 
    top:0; 
    left:0; 
} 

.textSwift::after{ 
    content:attr(data-after); 
    position: absolute; 
    font-weight: bold; 
    color: #ff1414; 
    font-size: 3.5rem; 
    bottom:0; 
    right:0; 
} 


.textAtRight { 
    text-align: justify; 
    direction: rtl; 
    clear: both; 
    float: right; 
    letter-spacing: 1.5px; 
}

HTML

<div class="row"> 
    <div class="col-md-6"> 
     <div class="carInfo"> 
     <p> 
      <div> 
       <span class="textSwift" data-before="THE" data-after="LIST">SWIFT</span> 
      </div> 

     <span class="textAtRight"> 
      <br>Lorem ipsum dolor sit amet 
      <br>Consectetur adipisicing elit 
      <br>dolor in reprehenderit in voluptate 
      <br>velit esse cillum dolore eu 
      <br>proident, sunt in culpa qui officia 
     </span> 

     </p> 
     </div> 
    </div> 
    </div>

希望这有助于..

Link for reference

来源

2017-07-27 04:28:48

利用媒体查询，以帮助你在不同的宽度改变代码。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

我认为你应该做的是利用查询和Flexbox，就来实现这一目标。

我希望我有些回答你的问题。我在视觉上很难理解你想要什么，所以如果我想出一个代码示例，我将分享它。

来源

2017-07-27 04:19:59 joeldesante

感谢您的回答。我是前端新手，所以我不太了解查询或flexbox。我会研究他们。 –

酷豆@ErolAliyev – joeldesante

个

变化在以下几个部分的CSS：

.wordThe { 
    font-weight: bold; 
    color: #ff1414; 
    font-size: 4.5vw; 
    padding-left: 6vw; 
} 
.textSwift { 
    padding-left: 22vw; 
    font-style: italic; 
    font-size:6.5vw; 
    font-weight: bold; 
    color: #fff; 
    line-height: 0.5; 
} 
.wordList { 
    font-weight: bold; 
    color: #ff1414; 
    font-size: 4.5vw; 
    padding-left:52vw; 
}

大众的计算公式为1/100的宽视，其动态变化的，你调整你的screen.similarly如果你愿意，你可以将相同的其他文本他们也很敏感。

来源

2017-07-27 07:24:30

响应文本标题

回答

相关问题