3格根据屏幕尺寸更改位置

本文介绍了3格根据屏幕尺寸更改位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我希望有3个div，通常显示在下面的页面中

I would like to have 3 divs that normally are shown in the page like below

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

因此html类似于

编辑:我确实认为有一个更好的解决方案，但将1和3保留在您可能要做的另一件事是将它们放置在里面另一个分区.

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.

有没有一种方法可以在没有外部容器div的情况下达到相同的视觉效果?

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

<section class="content-wrapper main-content clear-fix"> <div> <div id="1" class="main-content-left float-left"> @RenderSection("leftBefore", required: false) </div> <div id="3" class="main-content-left-after float-left"> @RenderSection("leftAfter", required: false) </div> </div> <div id="2" class="main-content-center float-left"> @RenderBody() </div> </section>

我的目标是使左侧菜单的宽度固定，而右侧菜单则使用剩余的空间.如果减小了屏幕尺寸，则div应该移动以使下面的内容(可能全部居中).

My goal is to have the left menu with a fixed width and the right are that uses the remaining space. If screen-size is reduced the divs should move in order to have something like below, possibly all centered.

有什么建议吗?

--------- | | | 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; } }