html – 3 div根据屏幕大小更改位置

概述我想通常在页面中显示3个div,如下所示 --------------| | || 1 | || | 2 ||-----| || | || 3 | || | |-------------- 所以HTML会是这样的 EDIT: I do think there is a bett 我想通常在页面中显示3个div,如下所示

--------------|     |      ||  1  |      ||     |   2  ||-----|      ||     |      ||  3  |      ||     |      |--------------

所以HTML会是这样的

EDIT: I do think there is a better solution but to keep 1 and 3 on the
left one after the other first thing you may do is placing them insIDe
another div.

I do belIEve that doing so it will be impossible to solve the resize
by the use of media querIEs only.

Is there a way to achIEve the same visual result without the external container div?

<section >                <div>                    <div ID="1" >                        @RenderSection("leftBefore",required: false)                    </div>                    <div ID="3" >                        @RenderSection("leftAfter",required: false)                    </div>                </div>                <div ID="2" >                    @RenderBody()                </div>            </section>

我的目标是让左侧菜单具有固定宽度,右侧则使用剩余空间.如果屏幕尺寸减小,则div应该移动以便具有类似下面的内容,可能全部居中.

有什么建议？

---------    |       |    |   1   |    |       |    |-------|    |       |    |   2   |    |       |    |-------|    |       |    |   3   |    |       |    ---------

解决方法 这应该工作：

HTML：

<div ID="div1"></div><div ID="div2"></div><div ID="div3"></div>

CSS：

div {    height: 200px;    wIDth: 100%;}@media screen and (min-wIDth:500px) {    #div1,#div3 {        wIDth: 50%;        float: left;        clear: left;    }    #div2 {        wIDth: 50%;        float: right;        height: 400px;    }}

总结

以上是内存溢出为你收集整理的html – 3 div根据屏幕大小更改位置全部内容，希望文章能够帮你解决html – 3 div根据屏幕大小更改位置所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。