如何将2个div放在一起？

时间：2017-10-18 23:18:59

标签： html css containers

对不起，重复这个问题很难回答......

2 个答案:

答案 0 :(得分：0)

你非常接近我将如何做到这一点。切换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>

答案 1 :(得分：0)

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

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题