Question

当屏幕用完时，我需要右栏1在左下方移动，以便两者并排坐下。我已经尝试了不同的溢出并将媒体查询设置为100％左右列，当浏览器/设备不能并排放置但无效时。右栏与左侧重叠，不想让步。几周前这样的大多数例子都没有任何问题，我想也许我已经改变了一些不确定的东西。

我有相同的设置，左边包含一个图像，右边包含一个链接，但也没有工作。

我错过了我的代码吗？

<div class="container1">

<div class="left-column1">

<p class="title">More Wallpapers</p>
<div id="wn">
    <div id="lyr1">
        <div id="inner1">

        </div>

    </div>
</div>  <!-- end wn div --></div>

<div class="right-column1"><div class="fb-facepile" data-href="https://www.facebook.com/Techagesite.Free.Mobile.Wallpapers" data-action="like" data-width="200" data-height="64" data-max-rows="2" data-colorscheme="dark" data-size="medium" data-show-count="true"></div></div>

</div>  



.container1 {
width: 100%;

}
.left-column1 {
width: 50%;
float:left;
}
.right-column1 {
width:50%;
float:left;
}

Answer 1

这是因为你的图像比你的图像更大。只需添加max-width即可。它会正常工作。

.left-column1 img{
    max-width: 100%;
}

DEMO

Answer 2

我能够使用媒体查询进行堆叠。

@media (max-width: 768px) {
.left-column1 {
    width:100%;
}
.right-column1 {
    width:100%;
}
}

http://jsfiddle.net/J5Q4u/

这样的事情对你有用吗？

Answer 3

为图像指定最大宽度和自动高度。 http://jsfiddle.net/439UX/6/

.container1 {
  width: 100%;
}
.left-column1 {
  width: 50%;
  float:left;
}
.right-column1 {
  width:50%;
  float:left;
}
.left-column1 img { 
  max-width:100%; height:auto; 
}

添加媒体查询可以避免文字列很小：

@media (max-width: 300px) {
.container1 > div { width:100%; }
}

Answer 4

去除宽度：50％;来自.left-column 1将解决问题

Div不会堆叠而是重叠

4 个答案: