均匀间隔的div取决于窗口大小

时间：2018-04-04 09:47:28

标签： html css

我在这里遇到一个小问题。我确信有一个非常简单的答案，但过去几天它让我疯狂，所以我想我会发布它。所以我有6个div（2套3个），每个套装都在它自己的线上，现在我遇到的问题是我似乎无法用可调窗口均匀地间隔开，就像窗口大小一样变化我希望平均空间随之改变。但我似乎无法让它发挥作用？

.main {
  width: 75%;
  margin: auto;
  background-color: #f2f2f2;
}

.org_container {
  width: 20%;
  margin: 6%;
  border: 2px solid #e1dfe1;
  border-radius: 15px;
  display: inline-block;
}

.org_name {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #e1dfe1;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: #f5f0f5;
  text-align: center;
  font-weight: bold;
}

.org_info {
  padding: 5px 10px 10px 5px;
  background-color: #fff;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.btnOpen {
  width: 50%;
  height: 30px;
  margin: 0px 0px 0px 25%;
  background-color: #2f8fcb;
  border: 2px solid #2f8fcb;
  border-radius: 3px;
  color: #fff;
  font-weight: bold;
}
<div class="main">

  <!-- First Div First Line-->

  <div class="org_container" id="org1">

    <div class="org_name">

      <p align="center">Name</p>

    </div>

    <div class="org_info">

      <p>Address Line 1</p>

      <p>Address Line 2</p>

      <p>Address Line 3</p>

      <p>Post Code</p>

      <p>Telephone Number</p>

      <button class="btnOpen">Open</button>

    </div>

  </div>

  <!-- Second Div First Line -->

  <div class="org_container" id="org2">

    <div class="org_name">

      <p align="center">Name</p>

    </div>

    <div class="org_info">

      <p>Address Line 1</p>

      <p>Address Line 2</p>

      <p>Address Line 3</p>

      <p>Post Code</p>

      <p>Telephone Number</p>

      <button class="btnOpen">Open</button>

    </div>

  </div>

  <!-- Thrid Div First Line -->

  <div class="org_container" id="org3">

    <div class="org_name">

      <p align="center">Name</p>

    </div>

    <div class="org_info">

      <p>Address Line 1</p>

      <p>Address Line 2</p>

      <p>Address Line 3</p>

      <p>Post Code</p>

      <p>Telephone Number</p>

      <button class="btnOpen">Open</button>

    </div>

  </div>

  <!-- First Div Second Line-->

  <div class="org_container" id="org4">

    <div class="org_name">

      <p align="center">Name</p>

    </div>

    <div class="org_info">

      <p>Address Line 1</p>

      <p>Address Line 2</p>

      <p>Address Line 3</p>

      <p>Post Code</p>

      <p>Telephone Number</p>

      <button class="btnOpen">Open</button>

    </div>

  </div>

  <!-- Second Div Second Line -->

  <div class="org_container" id="org5">

    <div class="org_name">

      <p align="center">Name</p>

    </div>

    <div class="org_info">

      <p>Address Line 1</p>

      <p>Address Line 2</p>

      <p>Address Line 3</p>

      <p>Post Code</p>

      <p>Telephone Number</p>

      <button class="btnOpen">Open</button>

    </div>

  </div>

  <!-- Thrid Div Second Line -->

  <div class="org_container" id="org6">

    <div class="org_name">

      <p align="center">Name</p>

    </div>

    <div class="org_info">

      <p>Address Line 1</p>

      <p>Address Line 2</p>

      <p>Address Line 3</p>

      <p>Post Code</p>

      <p>Telephone Number</p>

      <button class="btnOpen">Open</button>

    </div>

  </div>

</div>

1 个答案:

答案 0 :(得分：0)

这对你有用。

我已使用flex来实现这一目标。

＆＃13;
＆＃13; 
.main {
  width: 75%;
  margin: auto;
  background-color: #f2f2f2;
  padding:0 5%;
  box-sizing:border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.org_container {
  width: 27%;
  border: 2px solid #e1dfe1;
  border-radius: 15px;
  display: inline-block;
  margin: 6% 0;
}

.org_name {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #e1dfe1;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: #f5f0f5;
  text-align: center;
  font-weight: bold;
}

.org_info {
  padding: 5px 10px 10px 5px;
  background-color: #fff;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.btnOpen {
  width: 50%;
  height: 30px;
  margin: 0px 0px 0px 25%;
  background-color: #2f8fcb;
  border: 2px solid #2f8fcb;
  border-radius: 3px;
  color: #fff;
  font-weight: bold;
}
＆＃13; 
<div class="main">

  <!-- First Div First Line-->

  <div class="org_container" id="org1">

    <div class="org_name">

      <p align="center">Name</p>

    </div>

    <div class="org_info">

      <p>Address Line 1</p>

      <p>Address Line 2</p>

      <p>Address Line 3</p>

      <p>Post Code</p>

      <p>Telephone Number</p>

      <button class="btnOpen">Open</button>

    </div>

  </div>

  <!-- Second Div First Line -->

  <div class="org_container" id="org1">

    <div class="org_name">

      <p align="center">Name</p>

    </div>

    <div class="org_info">

      <p>Address Line 1</p>

      <p>Address Line 2</p>

      <p>Address Line 3</p>

      <p>Post Code</p>

      <p>Telephone Number</p>

      <button class="btnOpen">Open</button>

    </div>

  </div>

  <!-- Thrid Div First Line -->

  <div class="org_container" id="org1">

    <div class="org_name">

      <p align="center">Name</p>

    </div>

    <div class="org_info">

      <p>Address Line 1</p>

      <p>Address Line 2</p>

      <p>Address Line 3</p>

      <p>Post Code</p>

      <p>Telephone Number</p>

      <button class="btnOpen">Open</button>

    </div>

  </div>

  <!-- First Div Second Line-->

  <div class="org_container" id="org1">

    <div class="org_name">

      <p align="center">Name</p>

    </div>

    <div class="org_info">

      <p>Address Line 1</p>

      <p>Address Line 2</p>

      <p>Address Line 3</p>

      <p>Post Code</p>

      <p>Telephone Number</p>

      <button class="btnOpen">Open</button>

    </div>

  </div>

  <!-- Second Div Second Line -->

  <div class="org_container" id="org1">

    <div class="org_name">

      <p align="center">Name</p>

    </div>

    <div class="org_info">

      <p>Address Line 1</p>

      <p>Address Line 2</p>

      <p>Address Line 3</p>

      <p>Post Code</p>

      <p>Telephone Number</p>

      <button class="btnOpen">Open</button>

    </div>

  </div>

  <!-- Thrid Div Second Line -->

  <div class="org_container" id="org1">

    <div class="org_name">

      <p align="center">Name</p>

    </div>

    <div class="org_info">

      <p>Address Line 1</p>

      <p>Address Line 2</p>

      <p>Address Line 3</p>

      <p>Post Code</p>

      <p>Telephone Number</p>

      <button class="btnOpen">Open</button>

    </div>

  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

我希望这对你有所帮助。

相关问题
最新问题