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通过媒体查询来实现此结果。示例如下：

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

此外：

我没有为flexbox使用浏览器前缀，因此它不适用于所有浏览器。添加前缀或使用autoprefixer使其在那里工作。
根据需要修复媒体查询参数，我只插入宽度800作为示例值，真正的查询检测手机会有所不同。

移动和桌面设备上内联块元素的特定顺序

1 个答案: