如何交换 2 个元素的边(一个是 float:left，另一个是 float:right)

问题描述

我有一个网站，一面是图片，另一面是文字.这是它的外观:

I have a website with an image on one side, and text on the other.This is how it looks:

如您在图片中看到的 - 左侧有一些文字，右侧有一些图片.然后你在左边有一个图像，在右边有一个文本，(旋转)等等.

As you see in the image - there is some text on the left and image on the right.Then you have an image on the left and text to the right,(in rotation) ect..

这是我使用 jsfiddle 制作的一个简单示例:http://jsfiddle.net/fyawuuh1/1/

This is a simple example I made using jsfiddle: http://jsfiddle.net/fyawuuh1/1/

在移动设备上显示页面时-(使用@media 查询)我想将图像组织到始终在顶部，并在图像下方显示文本(不旋转)，这意味着我将拥有:

When displaying the page on a mobile - (using @media queries) I want to organize the image to be always on top, and under the image to have text (no rotation), That means that I'll have:

• 图片
• 文字
• 图片
• 文字
• 图片
• 文字

我很难找到让它看起来像这样的方法..

I am having difficulties finding a way getting it look like this..

推荐答案

除了改变 html 结构之外，你还可以使用 flexbox 用 css 来实现:

Besides changing the html structure u can use flexbox to achieve it with css:

#container {
  display: flex;
  flex-flow: column;
}
#divA {
  order: 2;
}
#divB {
   order: 1;
}

这篇关于如何交换 2 个元素的边(一个是 float:left，另一个是 float:right)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！