Question

我试图建立一个响应式网页，我需要一个图像贴在右边，文字在大屏幕上贴在左边，然后让图像保留在小屏幕上的文字顶部。我尝试使用css网格，它适用于图像，但由于某种原因，文本不会从网格的最左边部分开始。

看起来像这样：

我已在下面列出了我的代码的相关部分。

＆＃13;

    <div class="container">
        <div class="row">
            <div class="col-lg-right-4 col-md-right-4 col-xs-12">
                <img src="assets/svg/asset-board_one-planet.svg" id="one-planet" />
            </div>
            <div class="col-lg-left-6 col-md-left-6 col-xs-12">
                <h3><b>WHAT</b> is This Title</h3>
                <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec neque et ipsum cursus aliquet. Ut tristique quis tortor eu consectetur. Nunc semper in neque egestas hendrerit. Aliquam congue ex id ex suscipit viverra. Ut pulvinar erat eu turpis eleifend imperdiet. Integer sodales id eros et fermentum. Ut iaculis neque sapien, id mollis ligula pretium ultricies.
                        Nunc a convallis lectus. Quisque elementum neque non ligula semper lobortis. Nulla nec turpis dictum, tincidunt massa sit amet, viverra erat. Quisque sit amet pretium orci. Duis egestas odio ac nisi mattis blandit. Etiam maximus quam sollicitudin, aliquam nisl at, convallis lacus. Nam eget suscipit ligula. Aliquam quis mi a odio posuere hendrerit. Curabitur et posuere nibh.</p>
            </div>

            
        </div>
    </div>

＆＃13;

{{1}}

＆＃13;

Answer 1

试试这个：

.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}

.box1 {
    grid-column-start: main-start;
    grid-row-start: main-start;
    grid-row-end: main-end;
 }

.box2 {
  grid-column-start: content-end;
  grid-row-start: main-start;
  grid-row-end: content-end;
}

.box3 {
  grid-column-start: content-start;
  grid-row-start: main-start;
}

.box4 {
  grid-column-start: content-start;
  grid-column-end: main-end;
  grid-row-start: content-end;
}

<div class="wrapper">
       
            <div class="box1">
                <img src="https://image.freepik.com/free-vector/globe-icon_23-2147508246.jpg" width="200" height="200" id="one-planet" />
            </div>
            <div class="box3">
                <h3><b>WHAT</b> is This Title</h3>
                <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec neque et ipsum cursus aliquet. Ut tristique quis tortor eu consectetur. Nunc semper in neque egestas hendrerit. Aliquam congue ex id ex suscipit viverra. Ut pulvinar erat eu turpis eleifend imperdiet. Integer sodales id eros et fermentum. Ut iaculis neque sapien, id mollis ligula pretium ultricies.
                        Nunc a convallis lectus. Quisque elementum neque non ligula semper lobortis. Nulla nec turpis dictum, tincidunt massa sit amet, viverra erat. Quisque sit amet pretium orci. Duis egestas odio ac nisi mattis blandit. Etiam maximus quam sollicitudin, aliquam nisl at, convallis lacus. Nam eget suscipit ligula. Aliquam quis mi a odio posuere hendrerit. Curabitur et posuere nibh.</p>
            </div>

            
        </div>

网格 - 使文本粘在左边的麻烦

1 个答案: