在桌面上有 4 列彼此相邻,在平板电脑上只有 2 列彼此相邻。 不知何故,这两列不会按照应有的方式对齐。
我总共使用了 12 列。 col-x 用于台式机,col-s-x 用于平板电脑。
*
{
box-sizing: border-box;
}
[class*="col-"]
{
float: left;
padding: 15px;
/*border: 1px solid red;*/
}
.row::after
{
content: "";
clear: both;
display: table;
}
/* For mobile phones: */
[class*="col-"]
{
width: 100%;
}
@media only screen and (min-width: 600px)
{
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px)
{
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
<div class="row">
<div class="col-3 col-s-6">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
<div class="col-3 col-s-6">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text bla bla blu blo bla bla bltext text text text text text text text
</div>
<div class="col-3 col-s-6">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div class="col-3 col-s-6">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text bla bla bla</div>
</div>
我搜索了一段时间,但不知道如何调用这种行为来更具体地研究。
当有第二行 div 时,它会在平板电脑上完美对齐,但会导致桌面版本崩溃。
感谢您的帮助!
我只是将整个代码与 CSS 一起复制粘贴到 React 应用程序中,并且工作得非常好。 如果它不适合您的情况,我可以建议您使用网格布局。 它会自动处理此类开箱即用的响应问题,您只需提及所需的列数即可。
以下是如何做到这一点的示例:
<div className="container">
<div className="column One">Column 1</div>
<div className="column Two">Column 2</div>
<div className="column Three">Column 3</div>
</div>
然后您可以按如下方式使用CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: repeat(3, minmax(250px, 1fr));
}
.column {
background-color: pink;
}
如果您想针对不同的屏幕尺寸使用不同的列数,
然后您可以使用媒体查询并更改 repeat(