时间戳

首页 > 解决方案 > CSS：根据屏幕大小重新定位列

javascript - CSS：根据屏幕大小重新定位列

问题描述

对于我的 Web 项目，我使用 Bulma CSS 来创建响应式 Web 应用程序。我不是 CSS 方面的专家，因为我的背景是 iOS 和 Android。所以我试图实现这种布局：

1.桌面

所有列都应根据其内容具有动态高度，但第 3 列的宽度应保持在视口的 30%。

在此处输入图像描述

2. 手机

所有列都应具有动态高度，但唯一的区别是在第 1 列和第 2 列之间插入第 3 列。所有列宽应占视口的 100%

在此处输入图像描述

到目前为止我尝试过的

<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" rel="stylesheet" /> 

<style>
  .column {
    height: 500px;
    background-color:purple;
    margin:2em;
    color: white;
    font-size:2em;
    display:flex;
    justify-content:center;
    align-items:center;
  }
</style>

<div class="columns">
<div class="column"> 1 </div>
<div class="column"> 2 </div>
<div class="column"> 3 </div>
</div>

这就是我坚持的地方。我在这里完成了这个输入链接描述，但它似乎不支持基于它的内容的动态高度

标签： javascripthtmlcssbulma

解决方案

也许您应该使用 Grid & Media 查询：

样式.css：

.columns {
    display: grid;
    grid-template-columns: 1fr 30%;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
                    "col1 col3" 
                    "col2 col3";
}
.column {
    width: 100%;
}
.column1 {
    grid-area: col1;
}
.column2 {
    grid-area: col2;
}
.column3 {
    grid-area: col3;
}
@media only screen and (max-width: 640px) {
    .columns {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: none;
    }
}

索引.html：

<div class="columns">
    <div class="column1 column">1</div>
    <div class="column2 column">2</div>
    <div class="column3 column">3</div>
</div>

您可以在此处轻松了解网格 ->网格花园

这里是关于媒体查询 -> MDN Docs Media Queries

推荐阅读