1.左侧图片宽度不定 2.右侧文字宽度不固定 3.父级元素宽度不固定

左边一个图，右边文字。

1.左侧图片宽度不定
2.右侧文字宽度不固定
3.父级元素宽度不固定
如图：
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7 
 8     @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
 9     * {
10         margin: 0;
11         padding: 0;
12     }
13     body {
14         font-family: 'open sans', sans-serif;
15         color: #444;
16         line-height: 22px;
17     }
18     .wrapper {
19         width: 100%;
20         max-width: 960px;
21         margin: 0 auto;
22     }
23     .image {
24         max-width: 48%;
25         display: inline-block;
26         min-width: 321px;
27     }
28     .text {
29         max-width: 48%;
30         margin-left: 2%;
31         min-width: 321px;
32         display: inline-block;
33         vertical-align: top;
34     }
35     .text .title {
36         font-weight: bold;
37     }
38     .text .description {
39         color: #666;
40     }
41     </style>
42 </head>
43 <body>
44     <div class="wrapper">
45         <img class="image" src="http://d.hiphotos.baidu.com/image/w%3D2048%3Bq%3D90/sign=643de7988026cffc692ab8b28d3971e1/adaf2edda3cc7cd95e68a5d83b01213fb80e916e.jpg" alt="a fat dog">
46         <div class="text">
47             <h3 class="title">the title of the item</h3>
48             <p class="description">the description of the item. the description of the item. the description of the item. the description of the item. the description of the item. the description of the item. the description of the item. </p>
49     </div>
50         
51     </div>
52 </body>
53 </html>

 

posted @ 2014-03-09 18:40  shrekuu  阅读(221)  评论(0)  编辑  收藏  举报