イメージの周りにスクロールするテキストを整列する方法はありますか？

私はこの歪んだイメージに自分のテキストを揃えようとしていますが、問題はテキストがスクロールしていることです。これと戦う方法はありますか？イメージの周りにスクロールするテキストを整列する方法はありますか？

私の目標は、画像全体に太字の「TITLE HERE」をそのまま置くことですが、プレースホルダのテキストはスクロールし続けますが、左に大きな画像を合わせることです。これは可能ですか？あなたの助けを前もってありがとう。

 /*BODY STUFF HERE*/ 
 

 
body { 
 
    background: WHITE; 
 
    background-attachment: fixed; 
 
    font-family: montserrat; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: #999; 
 
} 
 

 
a:hover { 
 
    color: indianred; 
 
} 
 

 
.title { 
 
    font-family: montserrat; 
 
    font-weight: 900; 
 
    font-size: 6vw; 
 
    position: relative; 
 
    width: 90%; 
 
    left: 200px; 
 
    margin-top: 0%; 
 
} 
 

 
.title2 { 
 
    font-family: montserrat; 
 
    font-weight: 900; 
 
    font-size: 1.10vw; 
 
    position: static; 
 
    width: 90%; 
 
    margin-left: 45%; 
 
} 
 

 
.scrollingtext p { 
 
    width: 100%; 
 
    padding: 0 10%; 
 
    font-size: 13px; 
 
} 
 

 

 
/*LEFT PROFILE IMAGE HERE*/ 
 

 
.image { 
 
    z-index: -1; 
 
} 
 

 
.image img { 
 
    position: fixed; 
 
    width: 50%; 
 
    left: -3.5%; 
 
    z-index: -1; 
 
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 71% 100%, 0% 100%); 
 
    clip-path: polygon(25% 0%, 100% 0%, 71% 100%, 0% 100%); 
 
} 
 

 

 
/*CELL TABLE STUFF*/ 
 

 
.tablerow { 
 
    display: table-row; 
 
    width: 100%; 
 
} 
 

 
.table { 
 
    display: table; 
 
} 
 

 
.cell { 
 
    display: table-cell; 
 
} 
 

 
.right { 
 
    width: 50%; 
 
} 
 

 
.left { 
 
    width: 40%; 
 
} 
 

 
.mobile { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 1024px) { 
 
    .image img { 
 
    width: 100%; 
 
    position: relative; 
 
    padding: px 5% 0; 
 
    margin: 0; 
 
    top: 0; 
 
    left: 0; 
 
    } 
 
    h1 { 
 
    color: #000; 
 
    letter-spacing: normal; 
 
    width: 95%; 
 
    margin-top: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    font-size: 70PX; 
 
    text-align: center; 
 
    font-style: montserrat; 
 
    } 
 
    .title { 
 
    display: none; 
 
    } 
 
    .cell { 
 
    display: block; 
 
    } 
 
    .desktop { 
 
    display: none; 
 
    } 
 
    .mobile { 
 
    display: inherit; 
 
    text-align: center; 
 
    } 
 
    .right { 
 
    width: 80%; 
 
    margin: 0; 
 
    } 
 
    .farright { 
 
    width: 0; 
 
    } 
 
    #logo { 
 
    height: 25px; 
 
    position: absolute; 
 
    } 
 
    .story { 
 
    color: #FFF; 
 
    font-family: playfair display; 
 
    width: 100%; 
 
    height: 200px; 
 
    text-shadow: 2px 2px 5px #000; 
 
    background-color: #292929; 
 
    display: table; 
 
    } 
 
    .story_inside { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    } 
 
    .story h2 { 
 
    font-size: 40px; 
 
    width: 60%; 
 
    padding: 0 15%; 
 
    margin: 0; 
 
    line-height: 35px; 
 
    } 
 
    .story p { 
 
    font-family: montserrat; 
 
    margin: 0; 
 
    width: 70%; 
 
    padding: 10px 15% 0 15%; 
 
    } 
 
    @media screen and (max-width: 400px) { 
 
    h1 { 
 
     color: #000; 
 
     letter-spacing: normal; 
 
     width: 95%; 
 
     margin-top: 0; 
 
     padding: 0; 
 
     margin: 0; 
 
     font-size: 40px; 
 
     text-align: center; 
 
     font-style: montserrat; 
 
    } 
 
    @media screen and (max-width: 1030px) { 
 
     .byline { 
 
     font-size: 16px; 
 
     width: 100%; 
 
     right: 451%; 
 
     float: left; 
 
     position: relative; 
 
     width: 300%; 
 
     bottom: -150px; 
 
     }

<!--IMAGE GOES HERE--> 
 
<div class="image"> 
 
    <img src="http://via.placeholder.com/350x1150"> 
 
</div> 
 

 

 
<div class="scrollingtext"> 
 

 
    <!--DESKTOP TITLE AND BYLINE HERE--> 
 
    <div class="title">TITLE HERE 
 
    <p> 
 
    </div> 
 

 
    <div class="title2"><a href="http://www.twitter.com/#"><strong>AUTHOR HERE</strong></a>/TITLE</div> 
 
    <!--MOBILE TITLE HERE--> 
 
    <div class="table"> 
 
    <div class="tablerow"> 
 
     <div class="cell left desktop"></div> 
 

 
     <!--DESKTOP TITLE AND BYLINE HERE--> 
 
     <div class="title"> 
 
     </div> 
 

 

 
     <div class="cell farright"></div> 
 

 
    </div> 
 

 
    <div class="tablerow"> 
 

 
     <div class="cell left desktop"> 
 
     </div> 
 

 

 
     <div class="cell right"> 
 

 

 
     <!-- BODY TEXT GOES BELOW HERE --> 
 
     <p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example.</p> 
 

 
     <p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. </p> 
 

 
     <p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder 
 
      text to show an example. This is a set of placeholder text to show an example. </p> 
 

 
     <p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder 
 
      text to show an example. This is a set of placeholder text to show an example. </p> 
 

 
     <p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder 
 
      text to show an example. This is a set of placeholder text to show an example. </p> 
 

 
     <p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder 
 
      text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. </p> 
 

 
     <p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder 
 
      text to show an example. </p> 
 

 
     <p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder 
 
      text to show an example. This is a set of placeholder text to show an example. </p> 
 

 
     <p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder 
 
      text to show an example. </p> 
 

 
     <p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder 
 
      text to show an example. </p> 
 

 
     <p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder 
 
      text to show an example. </p> 
 

 
     <p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder 
 
      text to show an example. </p> 
 

 
     <p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder 
 
      text to show an example. </p> 
 

 
     <p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder 
 
      text to show an example. </p> 
 

 
     <p>This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder text to show an example. This is a set of placeholder 
 
      text to show an example. </p> 
 

 

 

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

出典

2017-12-04 johnstont05

うん？ – MadeInDreams

私はあなたが正確に探していたものは確かではありませんでしたが、CSSはあなたの調べる価値のある[shape-outside]（https://css-tricks.com/almanac/properties/s/shape-outside/）を持っていますまたは他のもの。しかし、まだ100％実装されていません。 [caniuse]（https://caniuse.com/#search=shape-outside） –

ちょうどそれを行うための簡単な方法は、あなたのテキストと同じ要素にCSSを使って画像のフロートを作ることであろうタイトル

.title{font-family: montserrat; 
font-weight: 900; 
font-size: 6vw; 
width: 90%; 
position: fixed; 
top: 50%; 
left: 10%;}

出典

2017-12-04 05:04:33

を修正するために、このCSSをADDD 。

この例のように、

#my_container { 
 
    width: 400px; 
 
    text-align: justify; 
 
} 
 

 
#my_image { 
 
    width: 100px; 
 
    height: 100px; 
 
    float: right; 
 
    border: 1px solid #000; 
 
    margin: 10px; 
 
}

<div id="my_container"> 
 
    <div id="my_image">image here</div> 
 
    And a lot of copy and paste to fill this example. 
 
    And a lot of copy and paste to fill this example. 
 
    And a lot of copy and paste to fill this example. 
 
    And a lot of copy and paste to fill this example. 
 
    And a lot of copy and paste to fill this example. 
 
    And a lot of copy and paste to fill this example. 
 
    And a lot of copy and paste to fill this example. 
 
    And a lot of copy and paste to fill this example. 
 
    And a lot of copy and paste to fill this example. 
 
    And a lot of copy and paste to fill this example. 
 
    And a lot of copy and paste to fill this example. 
 
    And a lot of copy and paste to fill this example. 
 

 
<div>

出典

2017-12-04 05:05:28 MadeInDreams

はいそこにそれを行うための方法ですが、私はあなたがスクロールしたときの結果を好きに行けば知りません。

これを試してください。画像に一致する幅を持つ空のdivを作成し、左に浮かせるようにして、テキストが上にくるようにします。あなたのテキストは比較的灰色の形状をTOU whantん

#container{ 
 
width :400px; 
 
height:400px; 
 
border:1px solid #000; 
 

 
} 
 
.filler{ 
 
float:left; 
 
clear:left; 
 
border:1px solid #000; 
 
height:15px; 
 
} 
 
#filler1{ 
 
width:200px; 
 
} 
 
#filler2{ 
 
width:190px; 
 
} 
 
#filler3{ 
 
width:180px; 
 
} 
 
#filler4{ 
 
width:170px; 
 
} 
 
#filler5{ 
 
width:160px; 
 
} 
 
#filler6{ 
 
width:150px; 
 
} 
 
#filler7{ 
 
width:140px; 
 
} 
 
#filler8{ 
 
width:130px; 
 
}

<div id="container"> 
 

 

 
<div id="filler1" class="filler"></div> 
 
<div id="filler2" class="filler"></div> 
 
<div id="filler3" class="filler"></div> 
 
<div id="filler4" class="filler"></div> 
 
<div id="filler5" class="filler"></div> 
 
<div id="filler6" class="filler"></div> 
 
<div id="filler7" class="filler"></div> 
 
<div id="filler8" class="filler"></div> 
 

 
some text to copy and paste and fill the example. 
 
some text to copy and paste and fill the example. 
 
some text to copy and paste and fill the example. 
 
some text to copy and paste and fill the example. 
 
some text to copy and paste and fill the example. 
 

 

 

 
</div>

出典

2017-12-04 05:14:47 MadeInDreams

イメージの周りにスクロールするテキストを整列する方法はありますか？

答えて

関連する問題