最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】html网页中实现左右布局和图片居中显示

图片 crifan 55浏览 0评论
折腾:
【未解决】基于html5up-landed的html5模板搭建网站主页
期间,需要让图片居中显示。
但是此处图片是:
底图,想要去适配
css image center
How To Center an Image
CSS Layout – Horizontal & Vertical Align
html – Center image using text-align center? – Stack Overflow
调试了好一会,结果由于已有的css和html太复杂,始终无法调节出我们要的效果。
又去参考
html left right layout
How To Create a Two Column Layout
Tryit Editor v3.6
css – HTML Left and Right Align Elements – Stack Overflow
最后改用flex

            <section class="second_row">


                <div class="left_parent">
                    <img class="left_image" src="images/rainbow_training.jpg" />
                </div>
                <div class="right_content">
                    <!-- <div class="row"> -->
                        <!-- <div class="col-4 col-12-medium">第一行</div>
                        <div class="col-4 col-12-medium">第二行</div> -->
                        <div class="col-4 col-12-medium">第1行</div>
                        <div class="col-4 col-12-medium">第2行</div>
                        <div class="col-4 col-12-medium">第3行</div>
                        <div class="col-4 col-12-medium">第4行</div>
                        <div>第5行</div>
                        <div>第6行</div>
                        <div>第7行</div>
                        <div>第8行</div>
                    <!-- </div> -->
                </div>
            </section>
css
.second_row {
    display: flex;
    padding-top: 3.5em;


    // width:100%;
    // text-align:center;


  // display: flex;                  /* establish flex container */
  // flex-direction: row;            /* default value; can be omitted */
  // flex-wrap: nowrap;              /* default value; can be omitted */
  // justify-content: space-between; /* switched from default (flex-start, see below) */
  // background-color: lightyellow;
}


.left_parent{
    flex: 70%;
    // float: left;
    // width: 68%;


    // position: absolute;
    // left: 0px;
}


.left_image {
    width: 100%;
}


.right_content {
    // display: inline-block;
    // width: 30%;
    // // float: right;
    // // float:left;
    // position: absolute;
    // left: 30%;
    flex: 30%;
}
暂时实现了:
左右布局:
只能算凑合用。
以及发现移动端无法自动适配:
需要后续想办法:
支持移动端屏幕宽度时,自动让多行在下一行显示。
其中,原先的按钮,则是支持自动适配布局的:
再去把8行的大小调节一下
不过,要去适配移动端的布局
html left right mobile to up down
CSS/Responsive/Mobile: Left/Right Sidebar after the Content though first in HTML? – Stack Overflow
html – Switching the order of block elements with CSS – Stack Overflow
html – Position right div over the left in mobile view – Stack Overflow
html – How can I move a div from top to bottom on mobile layouts? – Stack Overflow
html – Page moving left and right while in mobile browser – Stack Overflow
结果用:


@media screen and (min-width: 480x){
    .second_row {
        display: flex;
        padding-top: 3.5em;


        // width:100%;
        // text-align:center;


        // display: flex;                  /* establish flex container */
        // flex-direction: row;            /* default value; can be omitted */
        // flex-wrap: nowrap;              /* default value; can be omitted */
        // justify-content: space-between; /* switched from default (flex-start, see below) */
        // background-color: lightyellow;
    }


    .left_parent{
        flex: 70%;
        // float: left;
        // width: 68%;


        // position: absolute;
        // left: 0px;
    }


    .left_image {
        width: 100%;
    }


    .right_content {
        // display: inline-block;
        // width: 30%;
        // // float: right;
        // // float:left;
        // position: absolute;
        // left: 30%;
        flex: 30%;
    }
}


@media screen and (max-width: 480x){
    .second_row {
        display: flex;
        padding-top: 3.5em;
    }


    .left_parent{
        flex: 100%;
    }


    .left_image {
        width: 100%;
    }


    .right_content {
        flex: 100%;
    }
}
结果:
大屏时竟然也是上下布局了
算了,去参考前面的菜单的布局,是怎么自动适配的
也是类似写法
    @media screen and (max-width: 736px) {


去把这部分放到这里试试


        .second_row {
            display: flex;
            // padding-top: 3.5em;
        }
    
        .left_parent{
            flex: 100%;
        }
    
        .left_image {
            width: 100%;
        }
    
        .right_content {
            flex: 100%;
        }


...

结果:
还是有问题
宽屏时,不对:
小屏时,也错了:
调试了半天,很是诡异的是,改为:
.second_row {
    display: flex;
    padding-top: 3.5em;
}


.left_parent{
    flex: 70%;
}


.left_image {
    width: 100%;
}


.right_content {
    flex: 30%;
}
然后至少大屏是OK的了。

然后再去调试小屏
Flex 布局教程:语法篇 – 阮一峰的网络日志

【总结】
目前用:

@media screen and (min-width: 736px) {


    .second_row {


        display: flex;


        padding-top: 3.5em;


        flex-direction: row;


    }


    .left_parent{


        flex: 70%;


    }


    .left_image {


        width: 100%;


    }


    .right_content {


        flex: 30%;


    }


}


    @media screen and (max-width: 736px) {


        .second_row {
            display: flex;
            // padding-top: 3.5em;
            flex-direction: column;
        }


        .left_parent{
            flex: 100%;
        }


        .left_image {
            width: 100%;
        }


        .right_content {
            flex: 100%;
        }


。。。


目前可以实现:
大屏左右布局:
小屏上下布局:

转载请注明:在路上 » 【已解决】html网页中实现左右布局和图片居中显示

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
18 queries in 0.095 seconds, using 9.43MB memory