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>
  • 相关阅读:
    【转】Linq Group by
    SmtpClient发邮件时为什么用MailMessage.From而不用MailMessage.Sender
    HttpClient异步调用WEB服务
    WPF MVVM框架下,VM界面写控件
    WPF 后台读取样式文件
    vs2017 乱码
    ClickOnce 和管理员权限
    EF code first Mysql 更换主键类型
    Linq Group By
    Mvc api HelpPage 与注释
  • 原文地址:https://www.cnblogs.com/shrekuu/p/3590384.html
Copyright © 2011-2022 走看看