会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132487个问题
JAVA 全系列/第六阶段:项目管理与SSM框架/SpringMVC 14567楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        .box,.box1{
            width: 303px;
            height: 375px;
            background-color: red;
            position: relative;
        }
        .box1{
            float:left;
        }
         img{
            width: 100%;
        }
        .text{
            width: 100%;
            height: 88px;
            /*相对于已经定位的父元素定位*/
            position: absolute;
            left: 0;
            bottom: 20px;
            text-align: center;

        }
        .name{
            color: #fff;
            font-size: 21px;
            font-weight: 700;
        }
        .desc{
            color: #fff;
            font-size: 14px;
        }
        .price{
            color: #ebce6b;
            font-size: 24px;
            font-weight: 700;
        }
    </style>
</head>
<body>
<div class="box">
    <a href="#">
        <img src="images/370ad36f-425c-453a-b406-ccb2a0dffeec.jpg" alt="">
        <div class="text">
            <p class="name">MEIZU UR 高端定制耳机 预约</p>
            <p class="desc">【预约专用】私人定制,为你而声</p>
            <p class="price">¥200</p>
        </div>
    </a>
</div>
<div class="box1">
    <a href="#">
        <img src="images/370ad36f-425c-453a-b406-ccb2a0dffeec.jpg" alt="">
        <div class="text">
            <p class="name">MEIZU UR 高端定制耳机 预约</p>
            <p class="desc">【预约专用】私人定制,为你而声</p>
            <p class="price">¥200</p>
        </div>
    </a>
</div>
</body>
</html>

我已经在box1处加了float:left;效果图为什么没有实现块级元素水平显示

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS常用属性 14568楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/容器(旧) 14569楼
Python 全系列/第五阶段:数据库编程/项目-音乐播放器-旧 14573楼
Python 全系列/第十阶段:Flask百战电商后台项目/Flask百战电商后台项目 14574楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/IO流技术 14575楼
JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解 14577楼
JAVA 全系列/第十一阶段:分布式RPC调用和分布式文件存储/FastDFS 14578楼

微信截图_20221207215929.png

这个复制过来报红这是什么情况

JAVA 全系列/第六阶段:项目管理与SSM框架/Maven 14579楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637