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>

---

Bulma为您做所有的定位和工作，所以我认为您的问题在于您自己设置这些属性。CSS中的列和列类会自动进行布局，因此您不必这样做。你能说明你的目标是什么吗？是将图像并排布置在文本旁边吗？这将帮助我们找到更具体的帮助方式。是的，这正是我的目标。正如你在图片中看到的那样，我已经做到了。但它并不完美。我只是想知道是否有更好的方法来做我所做的事情。而且我做的根本没有反应。所以，是的，我希望看到更好的方法来实现它，也希望看到响应性更好的方法。Bulma为您完成了调整列大小的繁重工作，您所需要做的就是让图像填满列的空间（这实际上不是很好，最好有合适大小的图像，否则它会被像素化）。代码如下：

 .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;
}