如何让我的文本从红色 div 环绕到绿色 div？
[英]How do I get my text to wrap from the red div to the green div?
问题描述
Im extremely new to coding, I've tried multiple ways, but I cant seem to get the code to work.
我对编码非常陌生，我尝试了多种方法，但似乎无法使代码正常工作。 In my code I have a java script thats some what works, if you find a result to get the code to work, I will greatly appreciate it.在我的代码中，我有一个 Java 脚本，它可以正常工作，如果您找到使代码正常工作的结果，我将不胜感激。
<!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>
1 个解决方案
解决方案1
0 2016-05-28 04:52:30
someone achieved this type of code,有人实现了这种类型的代码，
$('.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}); });
.column { width: 150px; height: 200px; overflow:hidden; float:left; border: 1px solid #cccccc; padding: 0px 20px; margin: 10px; } .column .content { line-height: 20px; }
<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">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
单击交换按钮时，如何使红色div更改背景颜色以在红色和绿色之间切换？ - How do I get my red div to change background color to toggle between red and green when I click on the swap button?
如何将绿色 div 置于红色 div 下？ - How to position green div under the red one?
br之后如何获取文本并将其包装在div中 - how get text after br and wrap it in a div
如何从div完全按照看到的方式获取文本？ - How do I get the text from a div exactly as seen?
如何从 div class 赛普拉斯获取文本 - How do I get a text from a div class Cypress
我如何用jQuery的div包装输入 - how do i wrap the input with a div with jquery
如何从 div 中获取文本？ - How can I get a text from a div?
如何在绿色div中启用文本选择？ - How enable text selection in green div?
如何更改我的 javascript 以便只有所选按钮为红色或绿色 - How do I change my javascript so that only the selected button is coloured red or green
如何使用.textContent从选定的div中获取文本，不包括其子级文本 - How do I get the text from the selected div not including its childrens text using .textContent
相关标签