如何定义包含多个类定义的单个CSS类

Question

我使用的是Alchemer(一种调查设计软件(，它应用CSS的功能有限。我有一个关于文本和图像的问题，如果屏幕足够大(即两列(，或者对于手机/小屏幕，我想将其转换为单列。

问题是，该软件只允许将定义的类应用于某个问题。

我尝试将我的自定义css定义如下：

/* For mobile phones: */
.col-1 {width: 100%;} 
.col-2 {width: 100%;}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-1 {width: 50%;}
.col-2 {width: 50%;}
}

然后对问题应用".col-1"one_answers".col-2"。这具有只应用100%规则的效果，它似乎忽略了@media定义。

有没有一种方法可以定义一个单独的类来包装上面的类定义？我想这可能会保留@media的定义。

也可以接受其他建议！

我的代码如下：

/* For mobile phones: */
.col-1 {
width: 100%;
}
.col-2 {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-1 {
width: 50%;
}
.col-2 {
width: 50%;
}
}

text text text
<div class="row">
<div class="col-1"><img alt="" src="myimage.png" /></div>
<div class="col-2">More text<br />
<br /> More text</div>
</div>
<div class="row">
<div class="col-1">Texting text text text</div>
<div class="col-2"><img alt="" src="myimage2.jpg" /></div>
</div>

Answer 1

您的代码按预期工作，有什么问题？

设置小于100%的宽度仍然不会改变在元素div之前和之后创建新行的块行为。这是你所希望的还是？

如果是这样，您需要使用更多/不同的工具，而不仅仅是调整宽度。

下面是一个使用columnsCSS属性的示例：

@media only screen and (min-width: 600px) {
/* For tablets: */
.row {
columns: 2;
}
}
.col-1,
.col-2 {
background-color: orange;
}

text text text
<div class="row">
<div class="col-1"><img alt="" src="https://picsum.photos/200/300" /></div>
<div class="col-2">More text<br />
<br /> More text</div>
</div>
<div class="row">
<div class="col-1">Texting text text text</div>
<div class="col-2"><img alt="" src="https://picsum.photos/200/300" /></div>
</div>

一种更稳定的方法是使用CSS网格：

@media only screen and (min-width: 600px) {
/* For tablets: */
.row {
display: grid;
gap: 10px;
grid-template-columns: repeat(2, 1fr);
}
}
.col-1,
.col-2 {
background-color: orange;
}

text text text
<div class="row">
<div class="col-1"><img alt="" src="https://picsum.photos/200/300" /></div>
<div class="col-2">More text<br />
<br /> More text</div>
</div>
<div class="row">
<div class="col-1">Texting text text text</div>
<div class="col-2"><img alt="" src="https://picsum.photos/200/300" /></div>
</div>