Question

我对编码非常陌生，我尝试了多种方法，但我似乎无法让代码工作。在我的代码中，我有一个java脚本，其中有一些是有效的，如果你找到一个结果让代码工作，我将非常感激。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>ABOUT</title>
  <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Akronim|Rye|Sancreek|Hanalei+Fill|Hanalei" rel="stylesheet" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <style>
    body {
      /*background-image:url(JPEG/HOME-LAYOUT.jpg);*/
      background-color: #3B78D9;
      margin: 0px 0px 0px 0px;
    }
    /*HOME PAGE STUFF*/
    #second-menu {
      position: absolute;
      background-color: #80BCFB;
      margin-top: -17px;
      z-index: -1;
      top: 32px;
      right: -50px;
    }
    @font-face {
      font-family: Langdon;
      src: url(http://www.taylorxcarr.com/Langdon.otf);
    }
    .main-site-container {
      position: relative;
      width: 1024px;
      height: 750px;
      padding: 2% 3.25% 0% 0%;
      margin: 0 auto;
      text-decoration: none;
      overflow: hidden;
    }
    .top-circle {
      position: relative;
      border-radius: 50%;
      width: 115px;
      height: 115px;
      margin: 0px 15px 0px 15px;
      display: inline-block;
      text-decoration: none;
      background-image: url("http://taylorxcarr.com/IMAGES/TAYLORxCARR-LOGO.png");
      background-size: 110px 110px;
      background-repeat: no-repeat;
    }
    .top-circle:hover {
      position: relative;
      border-radius: 50%;
      width: 115px;
      height: 115px;
      margin: 0px 15px 0px 15px;
      display: inline-block;
      text-decoration: none;
      background-image: url("http://taylorxcarr.com/IMAGES/TAYLORxCARR-LOGO-HOVER.png");
      background-size: 110px 110px;
      background-repeat: no-repeat;
    }
    .non-mobile-menu-text {
      position: absolute;
      font-family: Century Gothic, sans-serif;
      font-style: italic;
      font-weight: bold;
      font-size: 30px;
      color: #3B78D9;
    }
    .main-menu {
      position: relative;
      text-decoration: none;
      margin-top: 25px;
    }
    .menu {
      position: relative;
      width: 174px;
      height: 78px;
      margin: 0px 15px 0px 15px;
      display: inline-block;
      background-color: #FFFFFF;
      border-radius: 10px;
      text-decoration: none;
      top: -26px;
    }
    .menu:hover {
      position: relative;
      width: 174px;
      height: 78px;
      margin: 0px 15px 0px 15px;
      background-color: #449CFA;
      border-radius: 10px;
    }
    #about-left-columb {
      position: relative;
      float: left;
      width: 568px;
      height: 525px;
      margin: 19.5px 0px 19.5px 55px;
    }
    #inner-left-columb {
      position: relative;
      float: left;
      width: 274px;
      height: 525px;
      /*border: 1px solid blue;*/
    }
    #about-page-photo {
      position: relative;
      float: left;
      width: 274px;
      height: 296px;
      background-image: url("http://taylorxcarr.com/flat%2C1000x1000%2C075%2Cf.u2.jpg");
      background-size: 375px auto;
      background-repeat: no-repeat;
      -webkit-box-shadow: 5px 5px #245FBC;
      box-shadow: 5px 5px #245FBC;
    }
    .about-textbox {
      position: relative;
      background-color: #449CFA;
      width: 274px;
      height: 210.75px;
      margin-top: 315px;
      margin-right: 0px;
      margin-left: 0px;
      margin-bottom: 0px;
      -webkit-box-shadow: 5px 5px #245FBC;
      box-shadow: 5px 5px #245FBC;
    }
    .about-textbox-2 {
      position: relative;
      background-color: #449CFA;
      -webkit-box-shadow: 5px 5px #245FBC;
      box-shadow: 5px 5px #245FBC;
    }
    #about-right-columb {
      position: relative;
      float: right;
      width: 350px;
      height: 525px;
      margin: 19.5px 15px 19.5px 0px;
    }
    #resume-box {
      position: relative;
      float: left;
      margin: 0px 0px 19.5px 0px;
      width: 350px;
      height: 400.25px;
      background-image: url("http://taylorxcarr.com/resume.jpg");
      background-size: 350px auto;
      background-repeat: no-repeat;
      -webkit-box-shadow: 5px 5px #245FBC;
      box-shadow: 5px 5px #245FBC;
    }
    #resume-box-text {
      position: relative;
      float: left;
      width: 350px;
      height: 105.25px;
      background-color: #FFFFFF;
      -webkit-box-shadow: 5px 5px #245FBC;
      box-shadow: 5px 5px #245FBC;
    }
    #resume-box-text:hover {
      position: relative;
      width: 350px;
      height: 105.25px;
      background-color: #449CFA;
      -webkit-box-shadow: 5px 5px #245FBC;
      box-shadow: 5px 5px #245FBC;
    }
    .website-text {
      position: relative;
      font-family: Century Gothic, sans-serif;
      font-size: 17px;
      margin: 0px 0px 0px 10px;
      color: #FFFFFF;
    }
    .resume-download {
      position: absolute;
      font-family: Century Gothic, sans-serif;
      font-style: italic;
      font-weight: bold;
      font-size: 45px;
      color: #3B78D9;
    }
    @media only screen and (max-width: 375px) {
      body {
        /*background-image:url(JPEG/HOME-LAYOUT.jpg);*/
        background-color: #3B78D9;
        margin: 0px 0px 0px 0px;
      }
      .main-site-container {
        position: relative;
        max-width: 375px;
        padding: 0px 0px 0px 0px;
        height: 1683px;
        background-color: #3B78D9;
        overflow: none;
      }
      #second-menu {
        position: relative;
        width: ;
        height: 49px;
        background-color: #80BCFB;
        margin-top: -48px;
        z-index: auto;
        left: 0px;
        text-decoration: none;
      }
      #second-menu:hover {
        position: relative;
        width: 100%;
        height: 50px;
        background-color: #449CFA;
        margin-top: -49px;
        z-index: auto;
        left: 0px;
        text-decoration: none;
      }
      .second-menu-text {
        position: relative;
        color: #FFFFFF;
        font-family: Century Gothic, sans-serif;
        font-style: italic;
        font-weight: bold;
        font-size: 37px;
        padding-left: 130px;
        margin-top: 16px;
        text-decoration: none;
      }
      .main-menu {
        position: relative;
        text-decoration: none;
        margin-top: 25px;
        display: none;
      }
      .menu {
        display: none;
      }
      .top-circle {
        position: relative;
        border-radius: 50%;
        width: 120px;
        height: 120px;
        margin: 0px 15px 0px 15px;
        display: inline-block;
        background-color: #FFFFFF;
        text-decoration: none;
      }
      .top-circle:hover {
        position: relative;
        border-radius: 50%;
        width: 120px;
        height: 120px;
        margin: 0px 15px 0px 15px;
        display: inline-block;
        background-color: #449CFA;
        text-decoration: none;
      }
      /*IPHONE 6*/
      #about-left-columb {
        position: relative;
        float: left;
        width: 568px;
        height: 525px;
        margin: 19.5px 0px 19.5px 55px;
      }
      #inner-left-columb {
        position: relative;
        float: left;
        width: 274px;
        height: 525px;
        /*border: 1px solid blue;*/
      }
      #about-page-photo {
        position: relative;
        float: left;
        width: 125%;
        height: 586px;
        background-color: #FFFFFF;
        margin-left: -40px;
        margin-top: 26px;
        text-shadow: 0px 0px;
        -webkit-box-shadow: 5px 5px #245FBC;
        box-shadow: 5px 5px #245FBC;
      }
      .about-textbox {
        position: relative;
        background-color: #449CFA;
        width: 125%;
        height: 480px;
        margin-top: 630px;
        margin-right: 0px;
        margin-left: -40px;
        margin-bottom: 0px;
        text-shadow: 0px 0px;
        -webkit-box-shadow: 5px 5px #245FBC;
        box-shadow: 5px 5px #245FBC;
      }
      .about-textbox-2 {
        position: relative;
        background-color: #449CFA;
        display: none;
      }
      #about-right-columb {
        position: relative;
        float: right;
        width: 350px;
        height: 525px;
        margin-top: 19.5px;
        margin-right: 15px;
        margin-left: -80px;
        margin-bottom: 19.5px;
      }
      #resume-box {
        position: relative;
        float: left;
        margin-top: 563px;
        margin-right: 0px;
        margin-left: 5px;
        margin-bottom: 19.5px;
        width: 98.25%;
        height: 380px;
        background-color: #FFFFFF;
        text-shadow: 0px 0px;
        -webkit-box-shadow: 5px 5px #245FBC;
        box-shadow: 5px 5px #245FBC;
      }
      #resume-box-text {
        position: relative;
        float: left;
        width: 98.2%;
        height: 105.25px;
        background-color: #80BCFB;
        margin-left: 5px;
        text-shadow: 0px 0px;
        -webkit-box-shadow: 5px 5px #245FBC;
        box-shadow: 5px 5px #245FBC;
      }
    }
  </style>

</head>

<body>
  <div class="main-site-container">
    <a href="index.html" title="HOME" style="text-decoration: none;">
      <div id="second-menu">
        <p class="second-menu-text">MENU</p>
      </div>
    </a>
    <ul class="main-menu">
      <a href="ABOUT.html" title="ABOUT">
        <li class="menu">
          <p class="non-mobile-menu-text" style="margin: 19px 40px;">ABOUT</p>
        </li>
      </a>
      <a href="PORTFOLIO.html" title="PORTFOLIO">
        <li class="menu">
          <p class="non-mobile-menu-text" style="margin: 19px 10px;">PORTFOLIO</p>
        </li>
      </a>
      <a href="index.html" title="HOME">
        <li class="top-circle"></li>
      </a>
      <a href="CONTACT.html" title="CONTACT">
        <li class="menu">
          <p class="non-mobile-menu-text" style="margin: 19px 15px;">CONTACT</p>
        </li>
      </a>
      <a href="BLOG.html" title="BLOG">
        <li class="menu">
          <p class="non-mobile-menu-text" style="margin: 19px 45px;">BLOG</p>
        </li>
      </a>
    </ul>
    <section id="about-left-columb">
      <script type="text/javascript">
        $(ABOUT).ready(function() {
          var size = $("#data > p").size();
          $(".Column1 > p").each(function(index) {
            if (index >= size / 2) {
              $(this).appendTo("#Column2");
            }
          });
        });
      </script>
      <section id="inner-left-columb">
        <div id="about-page-photo" title="photo"></div>
        <div class="about-textbox" title="text">
          <div id="data" class="Column1" style="float:left;width:275px;height:212px;background-color:red;">
            <p>Lorem ipsum dolor sit amet, harum munere an vix, eum ad simul suscipiantur, ei eos quidam mandamus. Eum ex tritani blandit, natum magna id pri. Ut vis consul facete. Lorem appetere has et, qui te postea aliquip. Zril munere eu vis, id enim
              atomorum eos. Pro ne mundi eum ad simul suscipiantur, ei eos quidam mandamus. Eum ex tritani blandit, natum magna id pri. Ut vis consul facete. Lorem appetere has et, qui te postea aliquip. Zril munere eu vis, id enim atomorum eos. Pro ne
              mundi eum ad simul suscipiantur, ei eos quidam mandamus. Eum ex tritani blandit, natum magna id pri. Ut vis consul facete. Lorem appetere has et, qui te postea aliquip. Zril munere eu vis, id enim atomorum eos. Pro ne mundi eum ad simul
              suscipiantur, ei eos quidam mandamus. Eum ex tritani blandit, natum magna id pri. Ut vis consul facete. Lorem appetere has et, qui te postea aliquip. Zril munere eu vis, id enim atomorum eos. Pro ne mundi</p>
          </div>
        </div>
      </section>
      <div class="about-textbox-2" style="width: 274px; height:525px; float:right;" title="text">
        <div id="Column2" style="float:left;width:275px;height:525px;background-color:green;">
          <p></p>
        </div>
      </div>
    </section>
    <section id="about-right-columb">
      <div id="resume-box" title="picture"></div>
      <a href="#" download>
        <div id="resume-box-text" title="button/download">
          <p class="resume-download" style="margin: 22px 40px;">DOWNLOAD</p>
        </div>
      </a>
    </section>
  </div>
</body>

</html>

＆＃13;

Answer 1

有人实现了这种类型的代码，

＆＃13;

$('.column[data-overflow]').each(function(index) {
    var $this = $(this),
        $parent = $($this.data('overflow')),
        colHeight = $parent.innerHeight(),
        scroll = parseInt(colHeight) * (index + 1),
        newHeight = "-=" + scroll + "px";
    
    $this.html($parent.html())
         .find('.content').css({ marginTop: newHeight});

});

＆＃13;

.column {
 width: 150px;
 height: 200px;
 overflow:hidden;
 float:left;
 border: 1px solid #cccccc;
 padding: 0px 20px;   
 margin: 10px;    
}

.column .content {
 line-height: 20px;   
}

＆＃13;

<div id="column1" class="column">
   <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip pisumathu ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

<div class="column" data-overflow="#column1">

＆＃13;

请点击此处：jsfiddle

如何将我的文本从红色div包装到绿色div？

1 个答案: