Question

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

我现在正在努力完成 Bulma Framework 。

所以只知道我正在使用Bulma Framework（bulma.io）

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

我已经建立了这个： - Image

嗯，我相信我只是通过定位和一切来搞乱这个工作。它根本没有响应，当我调整窗口大小时，一切都会崩溃。我想看看你会如何反应性地构建它。请注意，我正在使用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;
}

一些CSS问题

0 个答案: