Question

我希望将我的文本与这个倾斜的图像对齐，但问题是文本正在滚动。有没有办法打击这个或不？

我的目标是在图像上保持粗体“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>

Answer 1

一种简单的方法是让你的图像在与文本相同的元素中浮动CSS。

像这个例子一样;

＆＃13;

#my_container {
  width: 400px;
  text-align: justify;
}

#my_image {
  width: 100px;
  height: 100px;
  float: right;
  border: 1px solid #000;
  margin: 10px;
}

＆＃13;

<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>

＆＃13;

Answer 2

添加此css以修复标题

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

Answer 3

是的，有办法做到这一点，但我不知道你在滚动时是否喜欢这个结果。

试试这个; 创建一个空的div，其宽度与您的图像相匹配，并使它们向左浮动，以便任何文本都会碰到它。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

有没有办法在图像周围对齐滚动文字？

3 个答案: