gpt4 book ai didi

html - 缩小窗口时如何使列保持静态?

转载 作者:行者123 更新时间:2023-11-28 00:09:41 24 4
gpt4 key购买 nike

我需要将带有静态文本的专栏放在网站上,因为当我缩小窗口时,它会向左移动。我不知道我在哪里可能是这个问题,我试图改变立场:但它不起作用。谢谢大家:)

https://codepen.io/ta_io/pen/xebQyE

<div class="container2">
<div class="table">
<div class="cell" style="width: 220px;">
<div class="title">
<h1>title</h1>
</div>
<div class="infos">
<small>
<table>
<tbody><tr>
<td width="45px">
Date
</td>
<td>
November 17, 2019 </td>
</tr>

<tr>
<td width="45px">
Tags
</td>
<td>
<a>ONE</a>
<a>TWO </a>
<a>THREE</a>
</td>
</tr>




</tbody></table>
</small>
</div>
</div>
<div class="cell">
<div id="text" class="columns">
<div class="listenelement">
Duis molestie tincidunt accumsan. Phasellus fringilla est vitae hendrerit volutpat. Curabitur molestie ante sollicitudin vehicula lobortis. Nam interdum elit tortor. Sed luctus vulputate sapien, sed auctor lectus dignissim a. Vivamus fringilla, enim a
dignissim consequat, leo ligula ullamcorper sapien, et blandit est libero nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</div>
</div>
</div>

</div>
</div>

最佳答案

我没有完全理解你的问题,但据我所知,你不希望表格列相互折叠,你可以使用 CSS Grid 来解决这个问题,看看 .table 规则(我删除了你的一些 css,sry 不想阅读所有这些)。你可以尝试这些值(value)观,如果你有更多问题或者这不是你想要的,你可以在评论中问我。

  * {
margin: 0;
padding: 0;
}

html {

width: 100%;
height: 100vh;
margin: 0 auto;
padding: 0 auto;

}


body {

width: 100%;
height: 100vh;
margin: 0 auto;
padding: 0 auto;
}



.container2 {
max-width: 100%;
width: 85%;
height: auto;
margin-left: auto;
margin-right: auto;
}

.table {
display: grid;
grid-template-columns: 250px 250px;
}

<div class="container2">
<div class="table">
<div class="cell" style="width: 220px;">
<div class="title">
<h1>title</h1>
</div>
<div class="infos">
<small>
<table>
<tbody>
<tr>
<td width="45px">
Date
</td>
<td>
November 17, 2019
</td>
</tr>
<tr>
<td width="45px">
Tags
</td>
<td>
<a>ONE</a>
<a>TWO </a>
<a>THREE</a>
</td>
</tr>
</tbody></table>
</small>
</div>
</div>
<div class="cell">
<div id="text" class="columns">
<div class="listenelement">
Duis molestie tincidunt accumsan. Phasellus fringilla est vitae hendrerit volutpat. Curabitur molestie ante sollicitudin vehicula lobortis. Nam interdum elit tortor. Sed luctus vulputate sapien, sed auctor lectus dignissim a. Vivamus fringilla, enim a
dignissim consequat, leo ligula ullamcorper sapien, et blandit est libero nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</div>
</div>
</div>

</div>
</div>

关于html - 缩小窗口时如何使列保持静态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55465003/

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