html 将两个card （中文联系方式、英文联系方式）水平放置，随界面大小变化

可以使用CSS的flexbox布局实现将两个card水平放置，并且随着界面大小的变化而自适应。具体实现方法如下：

HTML代码：

<div class="container">
  <div class="card">
    <h2>中文联系方式</h2>
    <p>...</p>
  </div>
  <div class="card">
    <h2>英文联系方式</h2>
    <p>...</p>
  </div>
</div>

CSS代码：

.container {
  display: flex; /* 将容器设置为 flexbox 布局 */
  flex-wrap: wrap; /* 允许子元素换行 */
}

.card {
  flex-basis: 50%; /* 将子元素宽度设置为50% */
  box-sizing: border-box; /* 将边框和内边距计算在子元素的宽度之内 */
  padding: 10px;
  border: 1px solid #ccc;
}

通过以上CSS代码，我们将容器设置为flexbox布局，并且允许子元素换行。每个子元素通过`flex-basis: 50%`设置宽度为50%，即平分容器的宽度。同时，我们将子元素的`box-sizing`设置为`border-box`，这样子元素的边框和内边距会被计算在子元素的宽度之内，避免了边框和内边距对布局的影响。

这样，两个card就可以水平放置，并且随着界面大小的变化而自适应。