• 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>
  • 相关阅读:
    浅析:setsockopt()改善socket网络程序的健壮性
    神奇的vfork
    2008级 毕业设计 题目
    Linux之父访谈录:设计内核只为了好玩
    启用Fedora的root账户登录
    Linux系统所使用的真实内存——free
    linux内核源码中常见宏标志tag
    c语言中的 顺序点
    tcpdump
    双系统中从Windows访问Linux分区 ext2 ext3 的三种方法
  • 原文地址:https://www.cnblogs.com/shrekuu/p/3590384.html
Copyright © 2020-2023  润新知