Question

我试图在任何时候将两个div放在彼此旁边，到目前为止似乎没有任何效果......

divs宽度必须是屏幕的50％！

我需要所有的div都有相同的类，所以我不能这样做：

div1
div2
div1
div2

etc...

这是我到目前为止所做的事情：

http://jsfiddle.net/dp8yktcg/

这是简单的CSS：

.baners{
    width: 50%;
    height: 65vw; 
    border:solid 1px #D8D8D8;
    display:inline-block;
    background:#FFF;


}

有人可以就此问题提出建议吗？

Answer 1

由于1像素边框，它们永远不会停留在同一条线上。

有两种方法可以让它们保持在同一条线上。

第一个（更好）是使用box-sizing: border-box;

除非有边框和填充，否则元素将 50％宽度始终。

第二个是使用 calc 函数作为宽度。

width: calc(50% - 2px);

使用此功能，您将从总宽度中删除2px的边框。

如果添加任何填充或增加边框宽度，请记得更新此内容！（无论如何，我建议你第一个选择）

修改

我忘了display: inline-block;存在问题，基本上会在两个元素之间添加一个空格，覆盖率超过100％。为防止出现这种情况，您只需添加float: left或在右侧添加一个负边距，例如margin-right: -4px;

Answer 2

不使用display:inline-block，而是将它们向左浮动并将框大小设置为边框。

.baners {
    width: 50%;
    height: 65vw;
    border:solid 1px #D8D8D8;
    float:left;
    background:#eee;
    box-sizing:border-box;
}

<div class="someClass">
    <div class="baners"></div>
    <div class="baners"></div>
    <div class="baners"></div>
    <div class="baners"></div>
</div>

Answer 3

首先将box-sizing属性设置为border-box，然后使用float，或删除div之间的空格：

.baners{
    width: 50%;
    height: 65vw; 
    border:solid 1px #D8D8D8;
    display:inline-block;
    background:#FFF;
    box-sizing: border-box;
    float: left; 
}

<div  class="someClass" >
    <div class="baners" >
    </div><div  class="baners" >
    </div><div class="baners" >
    </div><div  class="baners">
    </div>          
</div>

Answer 4

我会使用＆＃39; box-shadow＆＃39;实现这一目标。问题是50％+ 1px超过屏幕的一半，因为你的容器不是100％+ 4px，所以第二个盒子推到下一行，所以我们想做的就是在里面绘制边框50％。

.baners{
box-shadow:0px 0px 0px 1px black inset;
width: 50%;
height: 65vw; 
display:inline-block;
background:red;
float:left;

}

在这里摆弄：http://jsfiddle.net/dp8yktcg/7/

在任何时候都将两个div彼此相邻？

4 个答案: