移动和桌面视图的 CSS 对齐方式不同

Question

I have this layout :

 .biggest { height: 500px; width: 50%; background-color: teal; float: left; } .section1 { height: 200px; width: 50%; background-color: white; float: right; } .inside1 { height: 30px; width: 90%; background: deeppink; margin: 20px; } .inside2 { height: 30px; width: 90%; background: forestgreen; margin: 20px; }

 <div> <div class="biggest"></div> <div class="section1"> <div class="inside1"></div> <div class="inside2"></div> </div> </div>

I want to align boxes in this order :pink, teal, and green on mobile view. How to do that?

The white box is to keep the inside boxes together. I am facing problems while aligning elements inside columns in different order as boxes inside column can't be separated. If anyone have idea how to do that, an explanation would be a great help.

Answer 1

不幸的是，因为你对准他们这是不可能的，你把路.biggest之间.inside1和.inside2因为.biggest是他们父母的reletive .section1与简单的HTML和CSS，你不能马上显示器是出.section1对于手机在.section1虽然有一种讨厌的方式，我不推荐它你可以先用 js 做到这一点，你应该先获取元素并将其保存在一个变量中，然后尝试将其从它所在的位置删除，然后将其添加到在.inside1旁边，您也可以使用 jquery 并尝试使用.inside1 .detach()和.append()来分离元素并将其附加到其他地方，您可以在此处阅读有关它的更多信息

Answer 2

By using the grid layout and a media query for the mobile screen you can achieve this.

 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 100px); grid-auto-rows: 100px; grid-gap: 10px; } .pink { background: pink; } .teal { background: teal; grid-row: 1 / -1 } .green { background: green; } @media only screen and (max-width: 480px) { .grid { grid-template-columns: 1fr; } .pink { grid-row: 1; } .teal { grid-row: 2; } }

 <div class="grid"> <div class="teal"></div> <div class="pink"></div> <div class="green"></div> </div>

I hope this helps you to solve the problem.

Here's the link to the codepen .

Answer 3

When inside1 and inside2 are in a different parent container, this isn't possible. However, one solution is to have all three elements under one parent container, and then use CSS Grid to build the two-column layout as well as re-order at a different screen size.

Here's a CodePen demo: https://codepen.io/samsonzhangthesalmon/pen/qBdgZdy

Unlike @Prathamesh Koshti's answer, mine preserves the heights of the pink and green blocks using min-content in the grid.

 .container { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: min-content minmax(min-content, 1fr); } .biggest { height: 500px; width: 100%; background-color: teal; grid-row: 1/3; } .inside1 { height: 30px; width: 100%; background: deeppink; margin: 20px; } .inside2 { height: 30px; width: 100%; background: forestgreen; margin: 20px; } @media (max-width: 600px) { /* example of mobile */ .container { grid-template-columns: 1fr; /* reset to one column. Better than doing this is to put the two-column line in a min-width: 600px query and go mobile-first, but for the sake of clarity I'll overwrite it here */ } .biggest { grid-row: 2/3; } }

 <div class='container'> <div class="biggest"></div> <div class="inside1"></div> <div class="inside2"></div> </div>

Answer 4

2 things:

1- always try to use the simplest html and css - makes it a lot easier to debug 2- there's a trick here. notice how I had to reorder the div's in the html. In this way I can make use of the float property but also have the div's listed in the correct mobile order.

 body, html { margin: 0; padding: 0; } .biggest { height: 500px; width: 50%; background: teal; float: left; } .inside1, .inside2 { height: 200px; width: 50%; background: pink; float: right; margin-bottom: 100px; } .inside2{ background:green; } @media only screen and (min-width: 600px) { .biggest, .inside1, .inside2 { clear: both; width: 100%; margin-bottom: 100px; } }

 <div class="inside1"></div> <div class="biggest"></div> <div class="inside2"></div>