首页 新闻 会员 周边 捐助

页面布局问题

0
悬赏园豆：5 [已解决问题] 解决于 2019-05-30 09:13

怎么用代码实现下图的效果？一脸茫然！望解答！（请勿水贴）

Man+Man=Man++的主页 Man+Man=Man++ | 初学一级 | 园豆：171
提问于：2019-05-16 21:48

补充一下：这个问题明天必须解决。

 – 坐在坟头♛调戏鬼 5年前
< >
分享
最佳答案
0

这个方法太多了，小米上和浏览下是两个li，li里面包含左右两部分，左边是一个dt\dd,右边是一个img\div\啥的模块，左右并行的话可以浮动，可以flex布局，或者内容区就是一个dl ，左右是dt和dd，实现的方式代码很多，主要是你看它是怎么组成的。上下是两个相同的部分，可以遍历渲染，也可以独立写两个，两个部分中的内容又是左右两个部分，分成两个并列平行。右边是有个图片，左边又分为上下两行文字（明显是用dl\dt\dd）。

收获园豆：5
疯癫释流年 | 菜鸟二级 |园豆：306 | 2019-05-21 11:33
其他回答(3)
0

使用悬浮和定位就可以了

沉迷编程的程序员 | 园豆：219 (菜鸟二级) | 2019-05-17 03:29

位置总是调不准

支持(0) 反对(0) Man+Man=Man++ | 园豆：171 (初学一级) | 2019-05-17 11:23

@坐在坟头♛调戏鬼: 你是要自适应还是普通的？加下我扣1328542512我看看效果

支持(0) 反对(0) 沉迷编程的程序员 | 园豆：219 (菜鸟二级) | 2019-05-17 11:54
0

弹性布局

高小姐 | 园豆：202 (菜鸟二级) | 2019-05-17 09:07

什么叫弹性布局?

支持(0) 反对(0) Man+Man=Man++ | 园豆：171 (初学一级) | 2019-05-17 11:22
0

Html部分：

 

 

<ul>
                            <li>
                                <div class="redmi"><a href=""><img src="image/charger.png" alt=""></a></div>
                                <h4 class="title"><a href="">小米 USB充电器</a></h4>
                                <p class="cmd"><span>59元</span></p>
                            </li>
                            <li>
                                <div class="hot"><a href=""><img src="image/hot.png" alt=""></a></div>
                                <h4 class="look"><a href="">浏览更多</a></h4>
                                <p class="mostHot"><a href="">热门</a></p>
                            </li>
                        </ul>

css部分：

.collocation-content-bottom-right  ul {
    width: 205px;
    height: 299px;
    float: left;
}
.collocation-content-bottom-right  ul li {
    height:100px;
    background-color: #fff;
    padding-left: 29px;
    padding-right: 40px;
    padding-top: 45px;
    position: relative;
    margin-bottom: 10px;
}
.redmi {
    position: absolute;
    right: 20px;
    top: 32px;
    width: 80px;
    height: 80px;
    margin: auto;
}
.redmi a {
    display: block;
}
.redmi a img {
    width: 80px;
    height: 80px;
    margin: auto;
}
.title {
    font-size: 14px;
    
}
.title a {
    color: black;
    text-decoration: none;
}
.cmd {
    font-size: 12px;
    color: #ff6700;
    margin-top: 5px;
}
.cmd span {
    font-size: 14px;
}
.hot {
    position: absolute;
    right: 35px;
    top: 48px;
    width: 48px;
    height: 48px;
}
.look {
    font-size: 18px;
}
.look a {
    color: black;
    text-decoration: none;
}
.mostHot {
    display: block;
    font-size: 12px;
    color: #757575;
    margin-top: 5px;
}
.mostHot a {
    text-decoration: none;
}
Man+Man=Man++ | 园豆：171 (初学一级) | 2019-05-23 23:31
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。