zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    5、流程控制
    4、字典和元祖
    3、列表操作
    2、字符串和数据类型
    1.标识符练习
    使用xpath提取页面所有a标签的href属性值
    网页提取所有邮箱
    正则表达式
    提取包含QQ的文本为QQ邮箱
    python继承小demo
  • 原文地址:https://www.cnblogs.com/shrekuu/p/3590384.html
Copyright © 2011-2022 走看看