如何以50％的宽度保持两行内联？

Question

我有两行我希望彼此内联，而它们的宽度都是50％。

蓝图：

我有第1行红色和第2行蓝色，以便于查看。如您所见，第2行位于第1行下方，因为我认为没有足够的空间来显示它们的宽度均为50％。我怎么能克服这个？

Answer 1

如果HTML中有空格，则内联元素之间会有空格。

您可以通过获取蓝色行的开头div并将其放在红色行的结束div之后立即看到;没有空间，没有换行符。一旦你删除休息，他们将并排。

</div><div class="row2">

如果目标浏览器支持，请检查flexbox，而不是使用内联块。否则删除空格，将font-size设置为0或使用浮点数。

Answer 2

将float属性添加到row1和row2

https://jsfiddle.net/6a97hr0n/1/

.row1{
  background-color: red;
  height: 100%;
  width: 50%;
  display: inline-block;
  float: left;
}

.row2{
  background-color: blue;
  height: 100%;
  width: 50%;
  display: inline-block;
  float: left;
}

Answer 3

来自你的CSS，

我认为你缺少float属性，你也应该计算填充。

实施例： 总宽度：100％： 第1行：49％ 填充：2％ ROW2：49％

或者如果您想使用像素，请在css中使用calc属性进行搜索。 希望有所帮助！

Answer 4

你的想法是正确的，但你没有计算两个方框左边的边框。当你计算它们时，盒子的宽度大于50％。 我还更新了一些代码如下：

<div class="row row1">
    <div class="paper">
        <h1>USDT Wallet</h1>
        <h3>$0.00</h3>
    </div>
    <div class="paper">
        <h1>Convert</h1>
        <button>Convert USDT to LTC*</button>
        <br><br>
        <button>Convert LTC to USDT*</button>
        <p>*1% fee applies</p>
    </div>
</div>

<div class="row row2">
    <div class="paper">
        <h1>USDT Wallet</h1>
        <h3>$0.00</h3>
    </div>
    <div class="paper">
        <h1>Convert</h1>
        <button>Convert USDT to LTC*</button>
        <br><br>
        <button>Convert LTC to USDT*</button>
        <p>*1% fee applies</p>
    </div>
</div>

CSS：

.row{
  height: 100%;
  width: 49.5%;
  display: inline-block;
}

.row1{
  background-color: red;
}

.row2{
  background-color: blue;
}