Text wrapping and two-column adaptive and area scrolling plug-ins iscroll.js

First, text wrapping effect: use floating

<Divclass= "Boxleft"></Div>I am a paragraph of text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a paragraph is a piece of text I am a paragraph of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a paragraph of text I is a piece of text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a paragraph a paragraph of text I am a piece of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am A paragraph of text I am a piece of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am a paragraph text I am a piece of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am a Paragraph text I am a paragraph of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am a paragraph text I am a piece of text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a paragraph Text I am a piece of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am a text I am a piece of text I am a paragraph of text I am a text I am a text I am a text I am a text I am a text I am a text I am a piece of paper Word I was a piece of text I was a text I was a text I was a text I was a text I was a text I was a text I am a text I am a text I am a text I am a piece of text I am a text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a paragraph is a piece of text I am a paragraph of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a paragraph of text I is a piece of text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a paragraph a paragraph of text I am a piece of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am A paragraph of text I am a piece of text I am a text I am a piece of text I am a paragraphText I am a piece of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am a text I am a piece of text I am a paragraph of text I am a text I am a text I am a text I am a text I am a text I am a text I am a piece of paper Word I was a piece of text I was a text I was a text I was a text I was a text I am a text I am a text I am a text

        {            width: 200px;             height: 200px;             Border: 1px solid #000;             float: left;        

Second, two columns self-adapting

① The above example, if you put the text in another div box, the effect is the same

<Divclass= "Boxleft"></Div><Divclass= "Boxright">I am a paragraph of text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a paragraph is a piece of text I am a paragraph of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a paragraph of text I is a piece of text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a paragraph a paragraph of text I am a piece of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am A paragraph of text I am a piece of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am a paragraph text I am a piece of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am a Paragraph text I am a paragraph of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am a paragraph text I am a piece of text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a paragraph Text I am a piece of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am a text I am a piece of text I am a paragraph of text I am a text I am a text I am a text I am a text I am a text I am a text I am a piece of paper Word I was a piece of text I was a text I was a text I was a text I was a text I was a text I was a text I am a text I am a text I am a text I am a piece of text I am a text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a paragraph is a piece of text I am a paragraph of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a paragraph of text I is a piece of text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a text I am a paragraph a paragraph of text I am a piece of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am A paragraph of text I am a piece of text I am a text I am a piece of text I am a paragraphText I am a piece of text I am a text I am a text I am a text I am a paragraph of text I am a text I am a text I am a text I am a text I am a piece of text I am a paragraph of text I am a text I am a text I am a text I am a text I am a text I am a text I am a piece of paper Word I was a piece of text I was a text I was a text I was a text I was a text I am a text I am a text I am a text</Div>

② then adds the Overflow:hidden attribute to the right div box, which changes (triggering the BFC)

③ Remove the text from the right box, plus some styles

<class= "Boxleft"></div><  class = "boxright" ></div > 

        {            width: 200px;             height: 200px;             Border: 1px solid #000;             float: left;        }         . boxright{            overflow: hidden;             Height: 200px;             background: yellow;        

④ This makes it possible to make a two-column adaptive layout on the mobile side: left column fixed, right column adaptive

Three, regional scrolling effect plug-in: Iscroll.js

① Chinese Document: http://wiki.jikexueyuan.com/project/iscroll-5/

② Example:

    <Divclass= "Boxleft">        <ulID= "Leftul">            <Li>1</Li>            <Li>2</Li>            <Li>3</Li>            <Li>4</Li>            <Li>5</Li>            <Li>6</Li>            <Li>7</Li>            <Li>8</Li>            <Li>9</Li>            <Li>10</Li>            <Li>11</Li>            <Li>12</Li>            <Li>13</Li>            <Li>14</Li>            <Li>15</Li>            <Li>16</Li>            <Li>17</Li>            <Li>18</Li>            <Li>19</Li>            <Li>20</Li>            <Li>21st</Li>            <Li>22</Li>            <Li>23</Li>            <Li>24</Li>        </ul>    </Div>

        *{margin:0;padding:0; }. Boxleft{width:200px;Height:400px;background:#ccc;; Float: Left;Overflow:Hidden; }. Boxleft Li{List-style:None;Height:40px;width:195px;Border:1px solid #000; }

<!--Introducing Files -    <Scriptsrc= "Iscroll.js"></Script>    <Script>window.onload=function(){            NewIscroll (Document.queryselector ('. Boxleft'),{                //Scrollx:false,                //Scrolly:true,scrollbars:false,//whether scroll bars are displayedHScrollBar:false,//false to hide scroll bars in the horizontal directionVScrollBar:false,//false to hide scroll bars in the vertical directionHScroll:false,//false Disables horizontal scrolling true horizontal scrolling defaults to TrueVScroll:true,//false Suppresses vertical scrolling true vertical scrolling defaults to TrueSnap:true,//aligns to fixed positions and elementsMouseWheel:true,//Listen for mouse wheel events, if not set, there will be a rolling lag is not smooth            }); }    </Script>

Text wrapping and two-column adaptive and area scrolling plug-ins iscroll.js