用于设置条件的 CSS 解决方案 [重复]答案

【问题标题】：CSS solution for setting up a condition [duplicate]用于设置条件的 CSS 解决方案 [重复]
【发布时间】：2021-12-22 05:56:42
【问题描述】：

我正在使用引导程序将我博客的主页帖子分成 2 列。为了避免一个问题（由于高度不同，帖子显示不好，请参见此处的示例：

我将文章高度定义为 350 像素（在这里您可以看到它已解决：

问题在于，当访问者使用小屏幕（移动设备或小型平板电脑）时，此解决方案会导致帖子一个接一个地显示。

所以我目前正在使用 javascript 来避免这种情况，但我认为这不是最好的解决方案。你知道是否有更好的 CSS 方法来获得同样的结果？（我是新手）

索引：

<article class="post col-md-6 main article" id="DeviceScreen">

CSS：

#namisboobs{height:350px;}
#anasboobs{height:auto;}

标题：

<script>
  var el = document.getElementById('DeviceScreen');
    {
    if ($(window).width() < 960)
    { el.innerHTML = (('anasboobs'));
    }
    else { el.innerHTML = 'namisboobs';}
    }
</script>

【问题讨论】：

你的 js 上面有一个额外的{
为什么不对容器使用display: grid;？
<article class="post col-md-6 main article" id="DeviceScreen"> 中是否有两个 div 或某事？
或者你有两个<article class="post col-md-6 main article" id="DeviceScreen">s 在一个行或容器中？
还有其他不使用固定高度的方法，例如350px。

标签： javascript css wordpress

【解决方案1】：

你可以这样做。

.post {
  background-color: green;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="d-flex flex-wrap justify-content-center">
  <div class="align-self-stretch col-md-6 col-12 post">
    This is sample text.
  </div>
  <div class="align-self-stretch col-md-6 col-12 post">
    This is sample text.<br>
    This is sample text.<br>
    This is sample text.<br>
    This is sample text.<br>
    This is sample text.<br>
    This is sample text.<br>
    This is sample text.<br>
    This is sample text.
  </div>
</div>

【讨论】：