时间戳

首页 > 解决方案 > 在 css 中使用 float 属性时，背景渐变被删除

html - 在 css 中使用 float 属性时，背景渐变被删除

问题描述

在 div 标签上使用 float 属性时，设置为背景的渐变被删除。最后一个 css 属性，即 div.image 中的 float 属性会移除背景。

这是HTML代码

<div class="content">
        <div class="info">
            <h2>Enter details</h2>
            <h3>Username</h3>
            <input type="text" name="username">
            <h3>Password</h3>
            <input type="text" name="password">
        </div>
        <div class="image"><img class="image" src="C:\Users\Desktop\New folder\Picture\light-trails-8.jpg"></div>
    </div>

这是css代码

div.content{
    background: linear-gradient(to right,#0080ff 50% , lightblue);
    margin:0px;
    padding:0px;
    margin-top: 3px;
    }

img.image{
    width:250px;
    height: 250px;
}

div.info{
    float:left;
}
/***** After applying this style ****/
div.image{
    float:right;
}

这是设计网页的截图

在此处输入图像描述

标签： htmlcss

解决方案

里面的孩子div.content是漂浮的。添加这个来修复：

div.content {
    background: linear-gradient(to right,#0080ff 50% , lightblue);
    margin:0px;
    padding:0px;
    margin-top: 3px;

    /*  Add this */
    overflow:hidden;
    width: 100%;
}

推荐阅读