有没有办法使用 CSS 来添加 2 个相邻的国家，而不是每行 1 个？

Question

我正在尝试向每行平行添加 2 个国家/地区，同时保持每个国家/地区框的大小相同，目前我有一个。我尝试调整弹性框属性并使尺寸更小，但它不起作用。

这是我的国家/地区 div 的 html：

 <div class="country">
    <img class="flag" src="country_flags/ws.png" alt="Flag of Samoa"/>
    <h2>Samoa</h2>
    <p>Currency: Euros (EUR)</p>
    <p>Regions: Atua
    , Fa'asaleleaga
    , Tuamasaga
    </p>
    <a class="wiki-link" href="https://en.wikipedia.org/wiki/Samoa" target="_blank">Wikipedia</a>
    </div>

<div class="country">
    <img class="flag" src="country_flags/pk.png" alt="Flag of Pakistan"/>
    <h2>Pakistan</h2>
    <p>Currency: Rupee (PKR)</p>
    <p>Regions: Azad Jammu and Kashmir
    , Balochistan
    , Gilgit-Baltistan
    , Islamabad
    , Khyber Pakhtunkhwa
    , Punjab
    , Sindh
    </p>
    <a class="wiki-link" href="https://en.wikipedia.org/wiki/Pakistan" target="_blank">Wikipedia</a>
    </div>

这是我的CSS

.country-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Style for each country div */
.country {
  flex: 0 1 calc(50% - 1em); /* Adjust the width calculation */
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid #212020;
  margin: 1em; /* Add margin to create space between country divs */
  padding: 1em; /* Increase padding if needed for spacing within each country */
  text-align: center;
  background-color: beige;
}

/* Style for the flag image */
.flag {
  /* No need for additional styles here */
}

/* Style for the country name */
.country h2 {
  margin: 5px 0;
}

/* Style for the Wikipedia link */
.wiki-link {
  display: block;
  text-align: center;
  margin-top: 5px;
}

Answer 1

您需要将两个国家包装在一个容器中并应用弹性

.country-container {
  display: flex;  
  justify-content: space-between;
}

/* Style for each country div */
.country {
  
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid #212020;
  margin: 1em; /* Add margin to create space between country divs */
  padding: 1em; /* Increase padding if needed for spacing within each country */
  text-align: center;
  background-color: beige;
  width:40%;
}

/* Style for the flag image */
.flag {
  /* No need for additional styles here */
}

/* Style for the country name */
.country h2 {
  margin: 5px 0;
}

/* Style for the Wikipedia link */
.wiki-link {
  display: block;
  text-align: center;
  margin-top: 5px;
}

<div class ='country-container'>
<div class="country">
    <img class="flag" src="country_flags/ws.png" alt="Flag of Samoa"/>
    <h2>Samoa</h2>
    <p>Currency: Euros (EUR)</p>
    <p>Regions: Atua
    , Fa'asaleleaga
    , Tuamasaga
    </p>
    <a class="wiki-link" href="https://en.wikipedia.org/wiki/Samoa" target="_blank">Wikipedia</a>
    </div>

<div class="country">
    <img class="flag" src="country_flags/pk.png" alt="Flag of Pakistan"/>
    <h2>Pakistan</h2>
    <p>Currency: Rupee (PKR)</p>
    <p>Regions: Azad Jammu and Kashmir
    , Balochistan
    , Gilgit-Baltistan
    , Islamabad
    , Khyber Pakhtunkhwa
    , Punjab
    , Sindh
    </p>
    <a class="wiki-link" href="https://en.wikipedia.org/wiki/Pakistan" target="_blank">Wikipedia</a>
    </div>
 </div>

Answer 2

解决方案

1. 首先将html代码包裹在

   .counytry-container

   中。
2. 从

   margin

   中删除

   .country

   。
3. 将

   flex:1;

   添加到

   .country

   ，表示 div 应该占据相等的空间。
4. 添加

   gap: 10px

   创建排水沟。

代码

.country-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

/* Style for each country div */
.country {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid #212020;
  padding: 1em;
  /* Increase padding if needed for spacing within each country */
  text-align: center;
  background-color: beige;
}

/* Style for the flag image */
.flag {
  /* No need for additional styles here */
}

/* Style for the country name */
.country h2 {
  margin: 5px 0;
}

/* Style for the Wikipedia link */
.wiki-link {
  display: block;
  text-align: center;
  margin-top: 5px;
}

<div class="country-container">
<div class="country">
    <img class="flag" src="country_flags/ws.png" alt="Flag of Samoa"/>
    <h2>Samoa</h2>
    <p>Currency: Euros (EUR)</p>
    <p>Regions: Atua
      , Fa'asaleleaga
      , Tuamasaga
    </p>
    <a class="wiki-link" href="https://en.wikipedia.org/wiki/Samoa" target="_blank">Wikipedia</a>
  </div>

 <div class="country">
    <img class="flag" src="country_flags/pk.png" alt="Flag of Pakistan"/>
    <h2>Pakistan</h2>
    <p>Currency: Rupee (PKR)</p>
    <p>Regions: Azad Jammu and Kashmir
      , Balochistan
      , Gilgit-Baltistan
      , Islamabad
      , Khyber Pakhtunkhwa
      , Punjab
      , Sindh
    </p>
    <a class="wiki-link" href="https://en.wikipedia.org/wiki/Pakistan" target="_blank">Wikipedia</a>
  </div>
</div>