如何在不使用flex的情况下为div内的div做空格

Question

我有一个div，其中包含3 divs。内部divs是正方形。我想在不使用flex的情况下执行justify-content:space-around所做的事情。另外，如果我想使用space-around，我如何减少元素之间的差距。我觉得他们离彼此太远了。

.squareContainer{
  overflow: hidden;
  width:1200px;
  background-color:black;
}

.sqC{
  width: 300px;
  height: 300px;
  background-color: #7F5F01;
  color: white;
  text-align: center;
  margin: 5px;
}

.floatClass{
  float: left;
}

<div class="squareContainer">
   <div class="floatClass sqC">
      <h2>SQUARE</h2>
   </div>
   <div class="floatClass sqC">
       <h2>SQUARE</h2>
   </div>
   <div class="floatClass sqC">
        <h2>SQUARE</h2>
   </div>
</div>

Answer 1

您是否尝试过使用display: inline-block;？

将text-align: center;和display: block;添加到squareContainer。

同时将display: inline-block;添加到sqC课程，然后移除float: left。

.squareContainer{
  overflow: hidden;
  width:1200px;
  background-color:black;
  text-align: center;
  display: block;
}

.sqC{
  width: 300px;
  height: 300px;
  background-color: #7F5F01;
  color: white;
  text-align: center;
  margin: 5px;
  display: inline-block;
}

.floatClass{
 // float: left;
}

<div class="squareContainer">
   <div class="floatClass sqC">
      <h2>SQUARE</h2>
   </div>
   <div class="floatClass sqC">
       <h2>SQUARE</h2>
   </div>
   <div class="floatClass sqC">
        <h2>SQUARE</h2>
   </div>
</div>

Answer 2

您可以随意更改边距属性：

.sqC {
    width: 300px;
    height: 300px;
    background-color: #7F5F01;
    color: white;
    text-align: center;
    margin: 5px 2px;
}

Answer 3

为什么不修改保证金？

＆＃13;

＆＃13;

.squareContainer{
  overflow: hidden;
  width:1200px;
  background-color:black;
}

.sqC{
  width: 300px;
  height: 300px;
  background-color: #7F5F01;
  color: white;
  text-align: center;
  margin: 1px;
}

.floatClass{
  float: left;
}

＆＃13;

<div class="squareContainer">
   <div class="floatClass sqC">
      <h2>SQUARE</h2>
   </div>
   <div class="floatClass sqC">
       <h2>SQUARE</h2>
   </div>
   <div class="floatClass sqC">
        <h2>SQUARE</h2>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以使用固定边距将元素均匀分开。

＆＃13;

＆＃13;

.squareContainer{
  overflow: hidden;
  width:1200px;
  background-color:black;
}

.sqC{
  width: 300px;
  height: 300px;
  background-color: #7F5F01;
  color: white;
  text-align: center;
  margin: 5px 50px; 
}

.floatClass{
  float: left;
}

＆＃13;

<div class="squareContainer">
   <div class="floatClass sqC">
      <h2>SQUARE</h2>
   </div>
   <div class="floatClass sqC">
       <h2>SQUARE</h2>
   </div>
   <div class="floatClass sqC">
        <h2>SQUARE</h2>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者您可以使用具有响应性的相对单位

＆＃13;

＆＃13;

.squareContainer{
  overflow: hidden;
  background-color:black;
}

.sqC{
  width: 30%;
  height: 300px;
  background-color: #7F5F01;
  color: white;
  text-align: center;
  margin: 5px 1.5%; 
}

.floatClass{
  float: left;
}

＆＃13;

<div class="squareContainer">
   <div class="floatClass sqC">
      <h2>SQUARE</h2>
   </div>
   <div class="floatClass sqC">
       <h2>SQUARE</h2>
   </div>
   <div class="floatClass sqC">
        <h2>SQUARE</h2>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;