Question

假设我有2个div

    width: 140%;
    padding: 13px;
    height: 20;
    float: left;

如何让它们彼此相邻？（我能做的最好的方式）

Answer 1

试试这个：

<div>Hello</div>
<div>World</div>

div {
    border:1px solid #000;
    width: 200px;
    height:100px;
    margin: 10px;
    display: inline-block;
}

Answer 2

如果页面是100％，请考虑这一点。

总共280％的2个div如何适应100％的页面？

此外，高度应写为height: 20px;。

这是写这个的正确方法：

div {
  width: 50%;
  float: left;
  height: 20px;
  padding: 13px;
  box-sizing: border-box;
}

甚至更好：

div {
  width: 50%;
  display: inline-block.
  height: 20px;
  padding: 13px;
  box-sizing: border-box;
}

Answer 3

你正在使用width:140%使div更宽，使它们等于100％正是你要找的example这里我们将宽度设置为45％，因为填充因此正确对齐

.box {
    width: 45%;
    padding: 13px;
    height: 20;
    background:blue;
    margin-right: 20px;
    float: left;
}

Answer 4

对于您在问题中说明的情况，我所拥有的最佳解决方案是。

HTML

<div class="wrapper">
    <div class="box"></div>
    <div class="box"></div>
</div>

<强> CSS

*{
    box-sizing:border-box
}
.wrapper{
    display:table;
    width:280%;
}
.box {
    width:50%;
    display:table-cell;
    border:solid 2px red;
    padding: 13px;
    height: 20px;
}

基本上使用table的{{1}}布局可以达到您期望的效果。

对于包装div，我的宽度为280％，盒子的宽度为50％，最终每个盒子的宽度将达到140％，正如您所期望的那样。

工作fiddle

将2 div设置为彼此相邻

4 个答案: