如何将 2 个 div 并排放置？ [复制]答案

【问题标题】：How to put 2 divs next to each other? [duplicate]如何将 2 个 div 并排放置？ [复制]
【发布时间】：2017-10-18 23:18:58
【问题描述】：

抱歉重复了这个问题已经回答了......

【问题讨论】：

你的数学没有多大意义。更重要的是，左侧 div 占宽度的 85%，还是其他 div 占 50px？在 320 像素分辨率下，这将超过 100%

标签： html css containers

【解决方案1】：

使用 clac() 方法.rightDiv{ width: calc(100% - 54px);}

<!DOCTYPE html>
<html>
<head>
<style>
.container{
  width: 85%;
  background-color: yellow;
  border: 1px solid red;
}

.leftDiv{
  width: calc(100% - 54px);
  background-color: green;
  border: 1px solid black;
  float: left;
}

.rightDiv{
  width: 50px;
  height: 50px;
  background-color: blue;
  border: 1px solid black;
  float: left;
}

</style>
</head>
<body>

<div class="container">

    <div class="leftDiv">
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    </div>

    <div class="rightDiv"></div>
</div>

</body>
</html>

【讨论】：

计算复杂？哦，男孩，那你需要学习 CSS
IE8 已被弃用，而 IE9 即将推出。无论如何...
你只能用calc或者js没有别的办法:(

【解决方案2】：

你非常接近我的做法。切换 rightDiv 和 leftDiv，让 leftDiv 右边有 52px 的边距，不浮动：

.container{
  width: 85%;
  background-color: yellow;
  border: 1px solid red;
}

.leftDiv{
  margin-right: 52px;
  background-color: green;
  border: 1px solid black;
}

.rightDiv{
  width: 50px;
  height: 50px;
  background-color: blue;
  border: 1px solid black;
  float: right;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="container">

    <div class="rightDiv"></div>

    <div class="leftDiv">
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    Long text... Long text... Long text... Long text... Long text... 
    </div>
</div>

</body>
</html>

【讨论】：

它是 52px，因为您的浮动区域是 50px 宽，周围有 1px 边框（加上 2px）。如果不是 52px，也只有 50px，那么右 div 的左 2px 将与左 div 重叠。是的，如果去掉右边div的边框，只需要使用50px即可。