Question

已经检查了几个类似的答案并尝试使用包装器，绝对/相对等等进行不同的操作。似乎无法使我的divs做我想要的......！： - ）

情况如下：

<div id="slideout">
        <div id="slidecontent" style="margin:20px;float:left;">
           TEXT
        </div>
        <div id="clickme" style="width:300px;float:left;background: #FFF;" align="right">
            <img src="img/xxx.png" style="padding:2px;" width="16" height="15">
        </div>
    </div>

非内联css就是这个（对测试进行了内联调整......）：

#slideout {
    z-index: 200;
    background: #000;
    position: absolute;
    width: 300px;
    height: 60%;
    top: 20%;
    left:-280px;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    opacity:0.75;
}

#clickme {
    z-index: 200;
    height: 20px;
    width: 20px;
    background: #000;
}

#slidecontent {
}

我想要的是：包装器“slideout”是绝对的，因为它被放置在屏幕的左侧部分并使用一些jQuery代码滑出。然后我想把两个div放在彼此旁边，而不是在彼此的顶部......

Answer 1

您的slideout有width:300px 您的clickme已width:300px。

没有任何空间可以放置任何东西了！

尝试从width:300px删除clickme。

Answer 2

将div的宽度均等地设置为父div。即150 + 150左右

<div id="slideout">
        <div id="slidecontent" style="margin:20px;float:left;width:150px;">
           TEXT
       </div>
        <div id="clickme" style="width:150px;float:left;background: #FFF;" align="right">
           <img src="img/xxx.png" style="padding:2px;" width="16" height="15">
        </div>
    </div>

CSS FLOAT LEFT - 不能让两个div彼此相邻

2 个答案: