Css重新排序图像和文本 [英] Css reorder image and text

问题描述

大家好，



我有一个自动创建HTML的功能，可以显示数据库中每个记录集的文本和图像。



计划如下：

Hello all,

I have a function that creates automatically some HTML to show a text and an image for each recordset in a database.

The scheme is this one:

<div class="FonsGrisClarProjectes">
  <div class="FonsGrisClarProjectesText"> Text_1 </div>
  <div class="FonsGrisClarProjectesImatge"> Image_1 </div>
</div>
<div class="FonsGrisClarProjectes">
  <div class="FonsGrisClarProjectesImatge"> Image_2 </div>
  <div class="FonsGrisClarProjectesText"> Text_2 </div>
</div>
<div class="FonsGrisClarProjectes">
  <div class="FonsGrisClarProjectesText"> Text_3 </div>
  <div class="FonsGrisClarProjectesImatge"> Image_3 </div>
</div>

正如您所看到的，我正在生成替换文本和图像的代码。这在PC /完整版网站上看起来不错。



我希望能够在网页的移动版本中对图像进行重新排序。 />


我已经使用 @media only screen and（max-device-width：480px） {创建了移动设备的特定CSS有效，但我仍然不知道如何使用CSS随意重新排序两个div。



是否有可能只使用CSS？如果有可能......你会怎么做？



CSS代码与此相关：

As you can see I'm generating the code to alternate the text and the image. This looks nice in the PC/full version of the site.

I would like to be able to reorder the images in the mobile version of the web page.

I have already created specific css for the mobile using "@media only screen and (max-device-width: 480px) {" and it works, but I still don't know how to reorder two divs at will using CSS.

Is it possible doing that only using CSS? If it is possible... how would you do it?

The CSS code That is related to this:

.FonsGrisClarProjectes{
    background-color: #F5F5F5;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 40px;
}

.FonsGrisClarProjectesText{
    font: 11pt Arial, Helvetica, sans-serif;
    background-color: #F5F5F5;
  color:#000000;
  text-align: left;
  width: 90%;
  padding-top: 20px;
  margin-left: 8%;
}

.FonsGrisClarProjectesImatge{
  width: 90%;
}

.FonsBlancProjectes{
    background-color: #FFFFFF;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 40px;
}

.FonsBlancProjectesImatge{
  width: 90%;
}

.FonsBlancProjectesText{
    font: 11pt Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
  color:#000000;
  text-align: left;
  width: 90%;
  padding-top: 20px;
  margin-left: 8%;
}

.ImatgeProjecte{
    max-width: 80%;
}

谢谢！



我尝试了什么：



尝试将图像div浮动到左侧，文本div浮动到右侧。 （没效果）



试图设置相对和绝对位置（但这会将所有图像放在网页的顶部）。

Thank you!

What I have tried:

Tried to float the image div to the left and the text div to the right. (No effect)

Tried to set relative and absolute positions (but this puts all the images at the top of the web page).

推荐答案

跳过这个。

在CSS中会非常困难，可以通过使用一些绝对定位并更改元素的位置。但这无济于事，只会让它变得更加困难和混乱。



但是，如果你为此引入JavaScript。您可以轻松地重新排序元素。例如，这个 SO上的简单线程 [ ^ ]显示了这一点，

Skip this one.
It will be very much tough in CSS, it would be possible by using some absolute positioning and changing the positions of the elements. But that will not help, only make it more difficult and messier.

However, if you introduce JavaScript to this. You can easily reorder the elements. For example, this simple thread on SO[^] shows this,

function swapSibling(node1, node2) {
  node1.parentNode.replaceChild(node1, node2);
  node1.parentNode.insertBefore(node2, node1); 
}

window.onload = function() {
  swapSibling(document.getElementById('div1'), document.getElementById('div2'));
}

它使用本机JavaScript代码，并交换兄弟姐妹。在您的情况下，您可以执行以下操作：

That uses native JavaScript code, and swaps the siblings. In your case, you can do the following,

var parentElement = document.getElementsByClassName("FonsGrisClarProjectes");
function swapSibling(node1, node2) {
  parentElement.replaceChild(node1, node2);
  parentElement.insertBefore(node2, node1); 
}

// Where node1 and node2 and text or image. 

跳过上述解决方案 - 我希望它有目的地在那里

你应该考虑使用 flexbox [ ^ ]。我需要做的是，对元素应用ID，或使用他们的类名。类名的缺点是你得到多个对象，然后你必须遍历哪一个（特别是当你重写或重新排序它们时）。因此，在大多数情况下，拥有ID将有所帮助。



我会将你的HTML重写为，

Skip the above solution — I want it to be there on purpose
You should consider using flexbox[^]. What I will need to do is, apply either an ID to the element, or use their classnames. The disadvantage of class names is that you get multiple objects, and then you have to traverse which one was which (especially when you rewrite or reorder them). Thus, having ID will help in most cases.

I would rewrite your HTML to,

<div class="container">
<div class="FonsGrisClarProjectes" id="first">
  <div class="FonsGrisClarProjectesText"> Text_1 </div>
  <div class="FonsGrisClarProjectesImatge"> Image_1 </div>
</div>
<div class="FonsGrisClarProjectes" id="second">
  <div class="FonsGrisClarProjectesImatge"> Image_2 </div>
  <div class="FonsGrisClarProjectesText"> Text_2 </div>
</div>
<div class="FonsGrisClarProjectes" id="third">
  <div class="FonsGrisClarProjectesText"> Text_3 </div>
  <div class="FonsGrisClarProjectesImatge"> Image_3 </div>
</div>
</div>

然后，在CSS中，我可以执行以下操作，

Then, in the CSS, I can do the following trick,

/* works with classes as well as IDs */
.container{
  display: flex;
  flex-direction: column;
}

#first {
  order: 2;
}

#third {
  order: 1;
}

这将渲染对象在flex。



例如，请查看以下链接，编辑小提琴 - JSFiddle [ ^ ]



最后，请记住CSS不包含逻辑，因此一旦编写它将以这种方式工作。要根据兴趣进行更新，您可以使用JavaScript编写CSS。例如，

This will render the objects in the flex.

For an example, please have a look at the following link, Edit fiddle - JSFiddle[^]

Lastly, remember CSS does not include logic, so once written it will work that way. To update based on interests, you can use JavaScript to write the CSS. Such as,

（ ＃first）。css（ order，< span class =code-digit> 1 ）; // 等

("#first").css("order", 1); // etc.

如果你这样做不需要在运行时更新CSS（viewtime？），然后默认的CSS就足够了，但是根据任何兴趣或逻辑进行更新，JavaScript会跳进来。

If you do not need to update the CSS on runtime (viewtime?), then the default CSS is enough, however to update based on any interest or logic, JavaScript will jump in.

这篇关于Css重新排序图像和文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！