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