时间戳

首页 > 解决方案 > 一些 CSS 问题

html - 一些 CSS 问题

问题描述

我正在做一个个人项目。在学习网页设计和开发的道路上。

我现在实际上正在通过Bulma 框架工作。

所以只要知道我正在使用 Bulma 框架 (bulma.io)

所以是的，我一直有一些问题。

我已经建立了这个： -图片

好吧，我相信我只是通过摆弄定位和一切来解决这个问题。它根本没有响应，当我调整窗口大小时，一切都崩溃了。我想看看你们将如何响应地构建它。请注意，我正在使用 BULMA 提供的列来使它们彼此对齐。

这是我的代码

  <div class="columns is-gapless centered">
    <div class="column is-one-quarter">

                  <img src="https://bulma.io/images/placeholders/128x128.png" class="mainImg">

                </div>
                <div class="column is-one-quarter">
                  <div class="boxtext">
                    Lorem Ipsum Im dor dor dorLorem Ipsum Im dor dor
                    Lorem Ipsum Im dor dor dorLorem Ipsum Im dor dor dorLorem  
                    Lorem Ipsum Im dor dor dor Lorem Ipsum Im dor dor dor


                  </div>
                </div>
              </div>

我制作的物品的 CSS 是：-

 .columns.is-gapless.centered {
    margin: 0 auto;
    width: 100%;
}
img.mainImg {
    width: 1200px;
    height: 400px;
    margin-bottom: -10%;
    margin-left: 104%;
}

.boxtext {

    position: absolute;
    white-space: pre;
    left: 41%;
    margin-top: 2%;
    color: #000;
    font-family: Montserrat;
    font-weight: 500;
}

标签： htmlcssbulma

解决方案

推荐阅读