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>
  • 相关阅读:
    P4165 [SCOI2007]组队
    CF575B
    SG函数胡乱一气
    CF280C Game on Tree
    AGC010F
    CF140E
    多功能的低功耗蓝牙可穿戴设备用于监测血液酒精浓度
    智能手环幕后的英雄
    图像处理实用资源
    15.12DataGridView分页显示
  • 原文地址:https://www.cnblogs.com/shrekuu/p/3590384.html
Copyright © 2011-2022 走看看