html - 可能在所有单选按钮下方都有文本流吗？

Question

.recommends-Form-radioGroupContainer {
  display: flex;
  flex-wrap: wrap;
}

<fieldset class="gds-FormField">
    <legend class="gds-FormField-label">Your Health</legend>
    <input name="recommends_insurance_term_life_referral[health_status]" value="" type="hidden">
    <div class="gds-FormField-control recommends-Form-radioGroupContainer">
      <div>
        <input id="recommends_insurance_term_life_referral_health_status_excellent" required="required" type="radio" value="excellent" name="recommends_insurance_term_life_referral[health_status]">
        <label for="recommends_insurance_term_life_referral_health_status_excellent" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Excellent</label>
        <p class="gds-FormField-help recommends-Form-help" style="text-overflow: unset;">This is a short, jargon-free explanation of "Preferred Plus" without those actual words in it. It should explain the basics, but not too much.</p>
      </div>
      <div>
        <input id="recommends_insurance_term_life_referral_health_status_good" required="required" type="radio" value="good" name="recommends_insurance_term_life_referral[health_status]">
        <label for="recommends_insurance_term_life_referral_health_status_good" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Good</label>
      </div>
      <div>
        <input id="recommends_insurance_term_life_referral_health_status_fair" required="required" type="radio" value="fair" name="recommends_insurance_term_life_referral[health_status]">
        <label for="recommends_insurance_term_life_referral_health_status_fair" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Fair</label>
      </div>
      <div>
        <input id="recommends_insurance_term_life_referral_health_status_poor" required="required" type="radio" value="poor" name="recommends_insurance_term_life_referral[health_status]">
        <label for="recommends_insurance_term_life_referral_health_status_poor" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Poor</label>
      </div>
    </div>
  </fieldset>

关于获取 p 文本的最佳方法的任何想法(最终将有一个单独的 p 文本或每个按钮的提示，当选择该按钮时将显示)在所有单选按钮下方流动？

此外，即使在调整浏览器大小和堆叠按钮(即不是这样)的情况下，也希望 p 保留在所选按钮下方

)

Answer 1

这是您要找的吗？您可以删除 flex:1;如果您不希望它们灵活，请删除属性并删除 align-items and justify-content这是我刚刚添加的对齐方式。

How is it being aligned?

I've made use of relative and absolute positioning on parent (the outermost div) and child element (p tag) and initally hidden all the <p> tags and when the radio button is checked, the associated sibling <p> with that
specific class is shown.

.recommends-Form-radioGroupContainer{
  display:flex;
  position:relative;
}

.recommends-Form-radioGroupContainer *{
  flex:1; 
}

.recommends-Form-radioGroupContainer .gds-FormField-help{
display:none;
padding:5px;
border:3px solid lightblue;
color:blue;
background:rgba(60,60,256,0.1);
position:absolute;
}

input[type="radio"]:checked ~ .gds-FormField-help{
display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="gds-FormField">
    <legend class="gds-FormField-label">Your Health</legend>
    <input name="recommends_insurance_term_life_referral[health_status]" value="" type="hidden">
    <div class="gds-FormField-control recommends-Form-radioGroupContainer">
      <div>
        <input id="recommends_insurance_term_life_referral_health_status_excellent" required="required" type="radio" value="excellent" name="recommends_insurance_term_life_referral[health_status]">
        <label for="recommends_insurance_term_life_referral_health_status_excellent" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Excellent</label>
        <p class="gds-FormField-help recommends-Form-help" style="text-overflow: unset;">This is a short, jargon-free explanation of "Preferred Plus" without those actual words in it. It should explain the basics, but not too much.</p>
      </div>
      <div>
        <input id="recommends_insurance_term_life_referral_health_status_good" required="required" type="radio" value="good" name="recommends_insurance_term_life_referral[health_status]">
        <label for="recommends_insurance_term_life_referral_health_status_good" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Good</label>
        <p class="gds-FormField-help recommends-Form-help" style="text-overflow: unset;">Another long message that you will type to check if it works</p>
      </div>
      <div>
        <input id="recommends_insurance_term_life_referral_health_status_fair" required="required" type="radio" value="fair" name="recommends_insurance_term_life_referral[health_status]">
        <label for="recommends_insurance_term_life_referral_health_status_fair" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Fair</label>
        <p class="gds-FormField-help recommends-Form-help" style="text-overflow: unset;">And this is also one of them other long messages</p>
      </div>
      <div>
        <input id="recommends_insurance_term_life_referral_health_status_poor" required="required" type="radio" value="poor" name="recommends_insurance_term_life_referral[health_status]">
        <label for="recommends_insurance_term_life_referral_health_status_poor" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Poor</label>
        <p class="gds-FormField-help recommends-Form-help" style="text-overflow: unset;">Last long message I promise</p>
      </div>
    </div>
  </fieldset>