Question

我想在垂直对齐

的右侧添加一个iframe

http://s13.postimg.org/s5f54mux3/Screen_Shot_2015_07_30_at_4_45_06_PM.png

它的代码是：

                    <div style='margin-left:10px;'>
                        <img src='/' class='circular' style='float:left;vertical-align:middle;'>
                    </div>
                </span>
                <span class='txt'>
                    <span class='user-info'> 
                        Text
                    </span>
                    <br>
                <span class='user-time'>
                    12 Minutes Ago   
                </span> 
            </span>
        </span> 
    </span>
</div>

如何在垂直对齐的右侧添加一个iframe浮动，如此...

http://s30.postimg.org/5qfa3x8o1/Screen_Shot_2015_07_30_at_4_45_06_PM.png

Answer 1

我认为最好的解决方案是添加float:right并将其定位为包含用户信息的span的最后一个元素。

我认为我在下方正确放置了它，但是您发布的代码缺少上半部分，这使得很难猜出是什么......

                <div style='margin-left:10px;'>
                    <img src='/' class='circular' style='float:left;vertical-align:middle;'>
                </div>
            </span>
            <span class='txt'>
                <span class='user-info'> 
                    Text
                </span>
                <br>
                <span class='user-time'>
                12 Minutes Ago   
                </span> 
            </span>
            <iframe style:'float:right;'></iframe>
        </span> 
    </span>
</div>

Answer 2

要将元素放在右侧，您可以使用float: right或绝对定位。我个人会使用绝对定位。这是一个解决方案：

#theIframe {
  position: absolute;
  top: 0;
  right: 0;
}

同时确保包含元素为position: relative（或除默认“静态”之外的任何其他位置。）

Answer 3

我不愿意接触到似乎已达成解决方案的地方，但我想知道为什么人们不会使用Flexbox。我知道它在IE9中不受支持 - 但我可以使用的数据表明这是一个可以忽略不计的问题，并且跨浏览器支持很广泛。 Can I Use Flexbox（注意：同时审核＆＃34;当前对齐＆＃34;和＆＃34;使用相对＆＃34;数据。）

考虑到这一点，你会考虑以下几点。

// HTML

                <div style='margin-left:10px;'>
                <img src='/' class='circular' style='float:left;vertical-align:middle;'>
            </div>
        </span>
        <div id="Flex-Container">
          <span class='txt'>
            <span class='user-info'> 
              Text
            </span>
            <br>
            <span class='user-time'>
              12 Minutes Ago   
            </span> 
          </span>
          <div id="Responsive-Iframe-Container">...</div>
        </div>
      </span> 
    </span>
  </div>

// CSS

#Flex-Container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
#Responsive-Iframe-Container {
  width: 45%;
}

可以在笔Responsive Iframe - Flexbox中找到＃Responsive-iframe-Container内标记的HTML和CSS。

当然，不是使用＃Responsive-Iframe-Container，而是可以根据需要简单地替换<iframe src="#"></iframe>样式。

我是HTML和CSS的初学者自学者，所以如果建议的代码有问题，请原谅我，请告诉我它是什么。

使iframe浮动在垂直对齐的右侧

3 个答案: