Конкретный порядок встроенных элементов на мобильных и настольных устройствах

Question

Я пытаюсь добавить две квадратные объявления справа от изображения на веб-сайте. Идея заключается в том, чтобы сделать это реагировать так:

http://s9.postimg.org/pdecyqi8f/div.png

Возможно ли это, чтобы достичь с помощью CSS?

Я использую inline-block, чтобы разместить рекламу вправо и max-width: 100%, чтобы увеличить изображение. Мне нужна поддержка IE 9+ и мобильных браузеров.

Я пробовал разные подходы, даже не знаю, какой пример кода показывать. Это сравнительно легко разместить рекламу справа от изображения с помощью inline-block:

div{ 
 
    border: 2px solid;   
 
} 
 
#img,#container{ 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
#ad1, #ad2{ 
 
    width: 30px; 
 
    height: 30px; 
 
    color: red;  
 
} 
 
#img{ 
 
    width: 100px; 
 
    height: 150px; 
 
    max-width: 100%; 
 
    color: purple; 
 
}

<div id="img"> </div> 
 
<div id="container"> 
 
    <div id="ad1">ad1</div> 
 
    <div id="ad2">ad2</div> 
 
</div>

http://jsfiddle.net/w7zfj1ju/

Но в данном случае я не получите желаемый вид на узких экранах. Кроме того, поскольку max-width: 100%; используется для #img, этот div будет охватывать #ad1 и #ad2 на узких экранах.

Для достижения желаемого мобильного зрения, которую я должен был изменить HTML к следующему:

div{ 
 
    border: 2px solid; 
 
    display: inline-block;  
 
} 
 
#ad1, #ad2{ 
 
    width: 30px; 
 
    height: 30px; 
 
    color: red; 
 
    vertical-align: top; 
 
} 
 
#img{ 
 
    width: 100px; 
 
    height: 150px; 
 
    max-width: 100%; 
 
    color: purple; 
 
}

<div id="ad1">ad1</div> 
 
<div id="img"> </div> 
 
<div id="ad2">ad2</div>

http://jsfiddle.net/gxnqo8da/

В этом случае я не знаю, как позиционировать #ad1 для право от #img. Я попытался полностью позиционировать, это не сработало. Flex также, казалось, не был вариантом из-за соображений совместимости.

Я также попытался использовать direction:rtl; так:

div{ 
 
    border: 2px solid; 
 
    display: inline-block;  
 
} 
 
#container{ 
 
    direction:rtl; 
 
    border: 0px; 
 
} 
 
#ad1, #ad2{ 
 
    width: 30px; 
 
    height: 30px; 
 
    color: red; 
 
    vertical-align: top; 
 
} 
 
#img{ 
 
    width: 100px; 
 
    height: 150px; 
 
    max-width: 100%; 
 
    color: purple; 
 
}

<div id="container"> 
 
    <div id="ad1">ad1</div> 
 
    <div id="img"> </div> 
 
    <div id="ad2">ad2</div> 
 
</div>

http://jsfiddle.net/n1mo76bv/

и это:

div{ 
 
    border: 2px solid; 
 
    text-align: left; 
 
} 
 
#container{ 
 
    direction:rtl; 
 
    border: 0px;  
 
} 
 
#ad1, #ad2{ 
 
    width: 30px; 
 
    height: 30px; 
 
    color: red; 
 
    vertical-align: top; 
 
} 
 
#img{ 
 
    width: 100px; 
 
    height: 150px; 
 
    max-width: 100%; 
 
    color: purple; 
 
    display: inline-block; 
 
} 
 
#ad1{ 
 
    display: inline-block; 
 
}

<div id="container"> 
 
    <div id="ad1">ad1</div> 
 
    <div id="img"> </div> 
 
</div> 
 
<div id="ad2">ad2</div>

http://jsfiddle.net/w7sknehL/

не помогло, так как я не мог позиционировать #ad2.

Итак, я не прошу написать какой-либо код. Я просто отчаянно нуждаюсь в советах.

Answer 1

Если вам не нужна поддержка Android 2 и Opera Mini, вы все равно можете использовать flexbox для достижения этого результата с помощью мультимедийного запроса.Пример ниже:

.img { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: 300px; 
 
    background: blue; 
 
} 
 

 
.ad { 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
@media (min-width : 801px) { 
 
    .wrapper { 
 
    padding-right: 110px; 
 
    } 
 
    .img { 
 
    float: left; 
 
    } 
 
    .ad { 
 
    clear: right; 
 
    float: right; 
 
    margin-right: -110px; 
 
    margin-bottom: 10px; 
 
    } 
 
} 
 

 
@media (max-width : 800px) { 
 
    .wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    .img { 
 
    order: 2; 
 
    margin: 10px auto; 
 
    } 
 
    .ad { 
 
    margin: 0 auto; 
 
    } 
 
    .ad1 { 
 
    order: 1; 
 
    } 
 
    .ad2 { 
 
    order: 3; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="img"> </div> 
 
    <div class="ad ad1">ad1</div> 
 
    <div class="ad ad2">ad2</div> 
 
</div>

также:

1. Я не использовал префиксы браузеров для Flexbox, поэтому он не будет работать во всех браузерах. Добавьте префиксы или используйте autoprefixer, чтобы он работал там.
2. Исправьте параметры запроса мультимедиа для вас, я только вставил ширину 800 в качестве примера, реальный запрос для обнаружения мобильного устройства будет отличаться.