I remember that when I used table for web page layout, it was very troublesome for the left and right columns to have multiple rows. Now I use css + div to implement it. We only need to set the total width of the big div, then, the div to be arranged in will be as long as the two widths are not the sum of the sizes and the small and large divs will always be there,
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> Untitled Document </title>
<Style>
# B {width: 300px ;}
# B a {width: 148px; display: block; float: left ;}
</Style>
</Head>
The above blue text shows the layout of the left and right columns. Let's take a look at the div code.
<Body>
<Div id = "B">
<A href = "browser. php? Tid = 1 "> gynecological Q & a </a>
<A href = "browser. php? Tid2 = 2 "> inflammation </a> <a href =" browser. php? Tid2 = 3 "> sexual intercourse </a> <a href =" browser. php? Tid2 = 17 "> irregular menstruation </a> <a href =" browser. php? Tid2 = 18 "> uterine fibroids </a> <a href =" browser. php? Tid2 = 19 "> Dysmenorrhea </a>
<A href = "browser. php? Tid = 4 "> male diseases </a>
<A href = "browser. php? Tid2 = 20 "> premature ejaculation </a> <a href =" browser. php? Tid2 = 21 "> foreskin </a> <a href =" browser. php? Tid2 = 22 "> male infertility </a> <a href =" browser. php? Tid2 = 23 "> prostatitis </a> <a href =" browser. php? Tid2 = 24 "> impotence </a>
<A href = "browser. php? Tid = 5 "> female health care </a>
<A href = "browser. php? Tid2 = 30 "> private care </a> <a href =" browser. php? Tid2 = 31 "> Breast Care </a> <a href =" browser. php? Tid2 = 32 "> endocrine regulation </a> <a href =" browser. php? Tid2 = 33 "> Blood and ovulation leucorrhea </a> <a href =" browser. php? Tid2 = 34 "> Star Healthcare </a> <a href =" browser. php? Tid2 = 35 "> white-collar health care </a>
<A href = "browser. php? Tid = 6 "> sexual psychology </a>
<A href = "browser. php? Tid2 = 36 "> </a> <a href =" browser. php? Tid2 = 37 "> Sex Education </a> <a href =" browser. php? Tid2 = 38 "> workplace psychology </a> <a href =" browser. php? Tid2 = 39 "> dating </a> <a href =" browser. php? Tid2 = 40 "> psychological knowledge </a>
<A href = "browser. php? Tid = 7 "> elder care </a>
<A href = "browser. php? Tid2 = 41 "> elder care </a> <a href =" browser. php? Tid2 = 42 "> diet for the elderly </a> <a href =" browser. php? Tid2 = 43 "> Old Man psychology </a> <a href =" browser. php? Tid2 = 44 "> fitness for the elderly </a> <a href =" browser. php? Tid2 = 45 "> Life for the elderly </a>
<A href = "browser. php? Tid = 8 "> fitness and fat yoga </a>
<A href = "browser. php? Tid2 = 46 "> bedroom fitness </a> <a href =" browser. php? Tid2 = 47 "> housework and fitness </a> <a href =" browser. php? Tid2 = 48 "> fatten knowledge </a> <a href =" browser. php? Tid2 = 49 "> Other methods </a>
<A href = "browser. php? Tid = 9 "> Health Care diet </a>
<A href = "browser. php? Tid2 = 50 "> nutritional mix </a> <a href =" browser. php? Tid2 = 51 "> health care products </a> <a href =" browser. php? Tid2 = 52 "> sub-health </a> <a href =" browser. php? Tid2 = 53 "> disease prevention </a>
<A href = "browser. php? Tid = 10 "> beauty and plastic slimming </a>
<A href = "browser. php? Tid2 = 54 "> Medical makeup </a> <a href =" browser. php? Tid2 = 55 "> whitening and moisturizing </a> <a href =" browser. php? Tid2 = 56 "> acne removal </a> <a href =" browser. php? Tid2 = 57 "> weight loss </a>
<A href = "browser. php? Tid = 11 "> dermatology </a>
<A href = "browser. php? Tid2 = 58 "> skin allergy </a> <a href =" browser. php? Tid2 = 59 "> chicken pox athlete's foot </a> <a href =" browser. php? Tid2 = 60 "> Other problems </a>
<A href = "browser. php? Tid = 12 "> wuguanke disease </a>
<A href = "browser. php? Tid2 = 61 "> myopia </a> <a href =" browser. php? Tid2 = 62 "> Oral ulcer </a> <a href =" browser. php? Tid2 = 63 "> dental caries in children </a> <a href =" browser. php? Tid2 = 64 "> eye disease </a> <a href =" browser. php? Tid2 = 65 "> sinusitis </a> <a href =" browser. php? Tid2 = 66 "> periodontal disease </a> <a href =" browser. php? Tid2 = 67 "> others </a>
<A href = "browser. php? Tid = 13 "> surgical diseases </a>
<A href = "browser. php? Tid2 = 68 "> cancer </a> <a href =" browser. php? Tid2 = 69 "> cervical spondylosis </a> <a href =" browser. php? Tid2 = 70 "> appendicitis </a> <a href =" browser. php? Tid2 = 71 "> hemorrhoids </a> <a href =" browser. php? Tid2 = 72 "> gallstone </a> <a href =" browser. php? Tid2 = 73 "> others </a>
<A href = "browser. php? Tid = 14 "> internal diseases </a>
<A href = "browser. php? Tid2 = 25 "> cold, diarrhea </a> <a href =" browser. php? Tid2 = 26 "> digestive ulcer </a> <a href =" browser. php? Tid2 = 27 "> hypertension </a> <a href =" browser. php? Tid2 = 28 "> lupus erythematosus </a> <a href =" browser. php? Tid2 = 29 "> Other diseases </a>
<A href = "browser. php? Tid = 15 "> male healthcare </a>
<A href = "browser. php? Tid2 = 74 "> male physiology </a> <a href =" browser. php? Tid2 = 75 "> male Nutrition </a> <a href =" browser. php? Tid2 = 76 "> masturbation </a> <a href =" browser. php? Tid2 = 77 "> others </a>
<A href = "browser. php? Tid = 16 "> parenting guide </a>
<A href = "browser. php? Tid2 = 78 "> pregnant childbirth </a> <a href =" browser. php? Tid2 = 79 "> preschool education </a> <a href =" browser. php? Tid2 = 80 "> baby care for children feeding </a>
<A href = "browser. php? Tid = 81 "> infertility </a>
</Div>
</Body>
</Html>
Let's see the effect chart.
For original site conversion, please indicate from www.111cn.net/cssdiv/css.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
