html - 两个 div 彼此相邻，堆叠响应变化

Question

我试图通过仅更改 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>

Answer 1

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

.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/