设置 2 div 彼此相邻

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

您正在使 div 比屏幕宽 width:140% 使它们等于小于 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 布局使用 div 可以达到您期望的结果。

我为包装纸取了 280% 的宽度 div，为盒子取了 50% 的宽度，最终 dividual 盒子中的每个宽度都会变成 140%，如您所料。

工作fiddle

设置 2 div 彼此相邻

setting 2 div next to each other

html

css

css-float