会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132488个问题
JAVA 全系列/第七阶段:生产环境部署与协同开发/Linux 14417楼
JAVA 全系列/第四阶段:网页编程和设计/jQuery 14419楼
Python 全系列/第五阶段:数据库编程/MySQL数据库的使用 14420楼
JAVA 全系列/第三阶段:数据库编程/SQL 语言 14421楼
JAVA 全系列/第六阶段:项目管理与SSM框架/SpringMVC 14422楼
Python 全系列/第二阶段:Python 深入与提高/异常机制 14423楼
Python 全系列/第十阶段:Flask百战电商后台项目/Flask百战电商后台项目 14425楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            /*p默认有16px的上下外边距*/
            margin: 0px;
        }
        .box{
            width:1260px;
            height:780px;
            position:relative;
        }
        /* 合并选择器*/
        .box1,.box2 {
            width:303px;
            height:375px;
            background-color: red;
            position:relative;
            float: left;
            margin:12px 0px 0px 12px;
            /*position:static;使用静态定位,就相对浏览页面*/
        }
         img{
            width:100%;
        }
        .text1{
            width:303px;
            height:88px;
            position:absolute;
            left:0px;
            bottom:20px;
            text-align:center;
        }
        .name1{
            color: #fff;
            font-size: 21px;
            font-weight: 700;
        }
        .desc1{
            color:#fff;
            font-size:14px;
        }
        .price1{
            color: #ebce6b;
            font-size: 24px;
            font-weight: 700;
        }
        .box2{
            background-color: whitesmoke;

        }
        .box2 img{
            width:100%;
        }
        .text2{
            width:303px;
            height:88px;
            position:absolute;
            left:0px;
            bottom:20px;
            text-align:center;
        }
        .name2{
            color: #333;
            font-size: 16px;
        }
        .desc2{
            color:#999;
            font-size: 14px;
        }
        .price2{
            color: #ebce6b;
            font-size: 24px;
            font-weight: 700;
        }
        .box2 span{
            color:#cc0000;
            font-size: 14px;
        }
        .box2 .number{
            color:#cc0000;
            font-size: 22px;
        }
        s{
            color:gray;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">

        <img src="images/1.jpg" alt="">
        <div class="text1">
            <p class="name1">魅族 EP3C 耳机</p>
            <p class="desc1">【限时特惠99元】</p>
            <p class="price1">¥129</p>
        </div>
    </a>
</div>
    <div class=" box2">

        <img src="images/2.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 POP Pro 主动降噪耳机</p>
            <p class="desc2">三重混合主动降噪技术 | 三麦克风智能通话降噪</p>
            <p class="price2"><span>¥</span><span class="number">499</span></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/3.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 POP2s 真无线耳机</p>
            <p class="desc2">【限时6期免息】好声音标杆 | Flyme 妙连</p>
            <p class="price2"><span>¥</span><span class="number">299</span></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/4.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 HIFI 解码耳放</p>
            <p class="desc2">【年货节特惠价149元】</p>
            <p class="price2"><span>¥</span><span class="number">169</span></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/5.jpg" alt="">
        <div class="text2 ">
            <p class="name1">魅族 HD60 头戴式蓝牙耳机</p>
            <p class="desc1">【年货节特惠价349元+12期免息】</p>
            <p class="price1">¥499</p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/6.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 HD60 降噪耳机</p>
            <p class="desc2">【年货节特惠价799元+12期免息】</p>
            <p class="price2"><span>¥</span><span class="number">1099</span></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/7.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 EP63NC 无线降噪耳机</p>
            <p class="desc2">【年货节特惠价249元+6期免息】</p>
            <p class="price2"><span>¥</span><span class="number">249</span><s>¥499</s></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/8.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 POP Pro 主动降噪耳机</p>
            <p class="desc2">【年货节特惠价149元】</p>
            <p class="price2"><span>¥</span><span class="number">149</span><s>¥169</s></p>
        </div>
        </a>
    </div>
</div>
</body>
</html>

老师,我想实现图片居中,该怎么弄,现在的效果图全部靠左,我想两边空白地方一样多

blob.png

右边红色的地方太多了,如何左右均匀分布



WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS常用属性 14426楼
JAVA 全系列/第六阶段:项目管理与SSM框架/Spring 14427楼
Python 全系列/第一阶段:Python入门/控制语句 14429楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin布局</title>
    <style>
        .box{
            width: 100%;
            height: 1155px;
            background-color: aqua;
        }
        .wrap{
            width: 1240px;
            height: 1150px;
            background-color: red;
            /* (父元素宽度-子元素宽度)/2 */
            margin: 0 auto;
        }
        .wrap>div{
            width: 303px;
            height: 375px;
            background-color: seagreen;
            float: left;
            margin-top: 10px;
            margin-right: 9px;
        }
        .four{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wrap">
            <div></div>
            <div></div>
            <div></div>
            <div class="four"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

image.png老师我想请问一下在这个布局下我想测试第四个测试是否被挤下一行的第一个,但是在内联样式设置第四个div背景为粉红色为什么没有显示出来呢?    

WEB前端全系列/第一阶段:HTML5+CSS3模块/初识CSS 14430楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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