javascript - DIV 标签显示：inlineblock；

Question

我将创建 3 个 div 标签，前两个标签彼此相邻。3. div标签在前两个DIV标签下。我已经这样做了，但是我在第一个div中插入了幻灯片，但是它们都变成了“display:block;”。

小提琴

我已经尝试更改代码...

Answer 1

试试这个会有所帮助：

.clear {
    clear: both;
}
.box {
    position: relative;
    background: rgba(255,255,255,.81);
    box-shadow: 0 0 10px #090909;
    border-radius: 3px;
}
.box:hover {
    transition: background .3s;
    background: rgba(255,255,255,.85);
}
#news {
    float: left;
    display: inline-block;
    height: 300px;
    width: 693px;
}
#login {
    display: inline-block;
    height: 300px;
    width: 275px;
    left: 10px;
}
#info {
    display: block;
    height: 120px;
    width: 978px;
    margin-top: 10px;
    margin-left: 7.68%;
}

小提琴

Answer 2

您可以通过使用 float 属性来实现这一点。查看更新的 JSFiddle：http ://fiddle.jshell.net/cZN8x/

通过在两个相邻的 div 上应用左右浮动，它们将彼此并排 - 只要总宽度小于容器，在这种情况下并不重要。使用浮动的一个问题是需要使用具有 CSS 属性的空 div 进行重置

clear: both;

希望有帮助！