我希望有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; } }更多推荐
3格根据屏幕尺寸更改位置
发布评论