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>
  • 相关阅读:
    display ntp-service sessions
    display ntp-service status
    MySQL与telnet安装
    YL_组播_IGMPv2-v3
    YL_组播_PIM-DM协议原理
    YL_组播_IGMP协议原理
    IIS发布站点问题
    css 定位及遮罩层小技巧
    MYSQL查询某字段中以逗号分隔的字符串的方法
    零度
  • 原文地址:https://www.cnblogs.com/shrekuu/p/3590384.html
Copyright © 2011-2022 走看看