两个相邻的 div，堆叠响应变化答案

【问题标题】：Two divs next to each other, stack with responsive change两个相邻的 div，堆叠响应变化
【发布时间】：2019-09-03 15:53:29
【问题描述】：

我试图通过仅更改 CSS 来实现一些目标而不更改 HTML。

在两列中，textarea-div 的宽度应该是两倍，一列的 textarea-div 宽度不应更改，

https://www.bilder-upload.eu/upload/c314f9-1567495199.png 抱歉，我没有声誉，无法发布图片

<style>
.paragraph {line-height: 20px;display: inline-block;padding: 4px;}
.text,.textarea{display: block;width: 200px;}
</style>

<div class="form form_shortcode">
 <form target="_self" method="post">
  <p class="paragraph"><input type="text" class="text"></p>
  <p class="paragraph"><input type="email" class="text"></p>
  <p class="paragraph"><input type="text" class="text"></p>
  <p class="paragraph"><input type="text" class="text"></p>
  <p class="paragraph"><textarea class="textarea" rows="3"></textarea></p>
 </form>
</div>

【问题讨论】：

重要提示：“仅通过更改 CSS 来更改 HTML。”。因此，不幸的是我无法更改 HTML。我只能做 CSS 调整

标签： html css

【解决方案1】：

您可以使用以下 css 来实现此目的。我添加了 cmets 进行解释，但如果有不清楚的地方，请随时询问。

.form_shortcode > form {
  font-size: 0; /* needed to remove space between inline-blocks */
}
.paragraph {
  line-height: 20px;
  display: inline-block;
  padding: 4px;
  margin: 0;
  vertical-align: top;
  width: 50%; /* set to half of parent's width */
  box-sizing: border-box; /* don't add padding to total width */
  font-size: initial; /* reset font-size 0 */
}
.paragraph:last-child {
  width: 100%; /* make last one span the full width */
}
.text,
.textarea{
  display: block;
  width: 100%;
}

@media (max-width: 500px) {
  .paragraph {
    width: 100%; /* set all to full width */
  }
}

JSFiddle：https://jsfiddle.net/Lw3ybteq/

【讨论】：

抱歉打扰：“textarea”不是最后一个孩子。下面有几个段落div。如果我在 textarea-div 下有多个段落 div，我该如何调整 CSS。所以只有 textarea div 的宽度是 200%
@ict 他们都只有.paragraph这个类吗？或者有没有办法区分文本段落和输入段落？或者你能肯定地说，例如前 5 段会有输入元素？
所有以下也有.paragraph，但有一个例外。 textarea 下方的以下 .paragraph 没有“输入类型”。我担心如果它的孩子是 textarea，我无法将特定的段落父级定义为宽度为 200% :(。希望有另一种解决方案。只有前 4 个段落有输入元素，然后是 textarea（宽度为 200%），然后是2个复选框（图中没有显示，也没有在我上面的html中显示
Try this, if the following paragraphs should also be 50% width，或use this, if the following paragraphs should behave normally
非常感谢！ :nth-child(5n) 是解决方案！

【解决方案2】：

我不确定如何仅更改 CSS。

你可以随时使用带有display: block的容器

<style>
.paragraph {line-height: 20px;display: inline-block;padding: 4px;}
.text,.textarea{display: block;width: 200px;}
.container {display: block}
</style>

<div class="form form_shortcode">
 <form target="_self" method="post">
  <div class="container">
      <p class="paragraph"><input type="text" class="text"></p>
      <p class="paragraph"><input type="email" class="text"></p>
  </div>
  <div class="container">
      <p class="paragraph"><input type="text" class="text"></p>
      <p class="paragraph"><input type="text" class="text"></p>
  </div>
  <p class="paragraph"><textarea class="textarea" rows="3"></textarea></p>
 </form>
</div>

【讨论】：

这就是挑战，正如我之前写的那样：“不改变 HTML，只改变 CSS。”。因此，不幸的是我无法更改 HTML。我只能做 CSS 调整
是的，对不起，你是对的，我没有正确阅读问题