Joan M Ответов: 1

Css переупорядочивает изображение и текст

Всем привет,

У меня есть функция, которая автоматически создает некоторый HTML-код для отображения текста и изображения для каждого набора записей в базе данных.

Схема такова:

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


Как вы можете видеть, я генерирую код для чередования текста и изображения. Это хорошо выглядит в ПК / полной версии сайта.

Я хотел бы иметь возможность изменить порядок изображений в мобильной версии веб-страницы.

Я уже создал специальный css для мобильного использования "@media only screen and (max-device-width: 480px) {"и это работает, но я до сих пор не знаю, как изменить порядок двух дивов по желанию с помощью CSS.

Возможно ли это сделать только с помощью CSS? Если это возможно... как бы вы это сделали?

Код CSS, который связан с этим:
.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 вправо. (Никакие эффекты)

Попытался установить относительное и абсолютное положение (но это помещает все изображения в верхнюю часть веб-страницы).

1 Ответов

Рейтинг:
7

Afzaal Ahmad Zeeshan

Пропустите это.
Это будет очень сложно в CSS, это было бы возможно с помощью некоторого абсолютного позиционирования и изменения положения элементов. Но это не поможет, только усложнит и запутает дело.

Однако если вы введете в это JavaScript. Вы можете легко изменить порядок элементов. Например, это простая нить на так[^] показать это, 

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 и меняет местами братьев и сестер. В вашем случае вы можете сделать следующее, 
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.


Пропустите вышеописанное решение — я хочу, чтобы оно было там специально
Вы должны рассмотреть возможность использования на основе адаптируемых блоков[^Что мне нужно будет сделать, так это применить либо идентификатор к элементу, либо использовать их имена классов. Недостатком имен классов является то, что вы получаете несколько объектов, а затем вам приходится пересекать, какой из них был каким (особенно когда вы переписываете или переупорядочиваете их). Таким образом, наличие ID поможет в большинстве случаев.

Я бы переписал ваш HTML на, 
<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, я могу сделать следующий трюк, 
/* works with classes as well as IDs */
.container{
  display: flex;
  flex-direction: column;
}

#first {
  order: 2;
}

#third {
  order: 1;
}

Это позволит визуализировать объекты во flex.

Для примера, пожалуйста, посмотрите на следующую ссылку, Edit fiddle - JSFiddle[^]

Наконец, помните, что CSS не включает в себя логику, поэтому после написания он будет работать именно так. Для обновления на основе интересов вы можете использовать JavaScript для написания CSS. Такие как, 
$("#first").css("order", 1); // etc.

Если вам не нужно обновлять CSS во время выполнения (viewtime?), то CSS по умолчанию достаточно, однако для обновления на основе любого интереса или логики, JavaScript будет прыгать.

Joan M

Спасибо, Афзаал, я пытался использовать display: table и трюки с верхним и нижним колонтитулами, но или это не работает на классах, или я гораздо ужаснее, чем думал...

Во всяком случае, ваше решение прекрасно работает.

Большое вам спасибо за вашу помощь.

5ed и принято. :большой палец вверх:

Afzaal Ahmad Zeeshan

По иронии судьбы, это был всего лишь поиск в Google. ;-)

Но спасибо, пожалуйста.

Joan M

: OMG: я могу обещать вам, что искал его в google... Мой G-Fu работает не очень хорошо ... ^^¡

Karthik_Mahalingam

5

Afzaal Ahmad Zeeshan

Спасибо, Картик!