请按照要求完成模块的结构和样式: 左图右文, 间距10px,

[问答题]

请按照要求完成模块的结构和样式: 左图右文, 间距10px, 左图宽100px高100px, 右文宽200px, 行高20px, 高度超出100px部分截断

查看答案及解析

LeonardoRain

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100%;
            height: 100px;
            text-align: left;
        }

        .imgBox {
            width: 100px;
            height: 100px;
            float: left;
            margin-right: 10px;
            background-color: #ff6699;
        }

        .imgBox img {
            display: inline-block;
            width: 100px;
            height: 100px;
        }

        .textBox {
            width: 200px;
            height: 100px;
            line-height: 20px;
            overflow: hidden;
            float: left;
            background-color: #6699ff;
        }
    </style>
</head>

<div class="container">
    <div class="imgBox"><img src="#" alt="image"></div>
    <div class="textBox">This is a div whose classname is textBox!This is a div whose classname is textBox!This is a div
        whose classname is textBox!This is a div whose classname is textBox!This is a div whose classname is textBox!
        This is a div whose classname is textBox!This is a div whose classname is textBox!This is a div whose classname
        is textBox!This is a div whose classname is textBox!This is a div whose classname is textBox!</div>
</div>

</html>

发表于 2019-09-09 19:56:30 回复(0)

半梦半醒、半忧伤

<style>
    .main
    {
        display:flex;
        flex:row nowrap;
                height:100px;
                overflow:hidden;
    }
    .left
    {
        width:100px;
        height:100px;
        margin-left:10px
    }
    .right{
        width:200px;
        height:20px;
    }
</style>
<div class='main'>
    <div class='left'>
    </div>
    <div class='right'>
    </div>
</div>

发表于 2019-12-06 20:51:35 回复(0)

学吒

发表于 2019-07-26 09:59:03 回复(1)

提交观点

问题信息

安卓工程师小米集团前端工程师 2018

来自：小米2018秋招前端工...

上传者：小小

难度：

3条回答 10收藏 1114浏览

请按照要求完成模块的结构和样式: 左图右文, 间距10px,

问题信息

热门推荐

相关试题