gpt4 book ai didi

html - 创建没有行的列(删除一个部分下方的空格)

转载 作者:行者123 更新时间:2023-11-27 22:49:01 24 4
gpt4 key购买 nike

所以我已经尝试过谷歌解决这个问题,但找不到解决方案。我目前正在尝试将我的页面分成 50% 的列。左栏应包含图像和表格,右栏应包含文本说明(大小可变)。我希望第一列的部分不受第二列的影响,因此将使用与 column-count 相同的逻辑。如果我使用 grid-template-columns: 50% 50%; 来创建我的列并调整浏览器窗口,右列中的文本会变长,并将表格下推到图像下方,这创建一个空白空间。有什么方法可以使用 grid-template-columns 并且不让两者的内容相互关联,所以只有两列,并且在调整浏览器窗口大小时每个元素之间的间距保持不变?

忘记提及当浏览器窗口调整大小时,两列应合并为一列,各部分的顺序应为图像、文本、表单。有没有办法在调整大小时调整顺序?

使用的 CSS 代码:

.grid-custom{
padding-left: $grid-gutter;
display: grid;
grid-template-columns: 50% 50%;
grid-gap: $grid-gutter;


@include media-query($small) {
padding-left: $grid-gutter-mobile;
grid-gap: $grid-gutter-mobile;
grid-template-columns: 100%;
}
}

最佳答案

HTML 不必很大也能显示概念。考虑一下:

 * { box-sizing: border-box; }
.layout-wrap {
display: flex;
min-height: calc(1px + 40vw);
}
.div1 { margin-right: 0.5em; }
.div1, .div2 { width: 50%; border: 4px solid black; }
<div class="layout-wrap">
<div class="div1"> <h1>IMAGE &amp; FORM</h1> </div>
<div class="div2"> <h1>TEXT</h1> </div>
</div>

关于html - 创建没有行的列(删除一个部分下方的空格),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59534750/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com