CSS 和编码的新手。为初学者画廊组织单选按钮和 div

Question

所以我似乎无法解决的问题是如何将隐藏的 div 移动到单选+标签按钮下。

    /*color palette: abls
    [lightest to darkest]
    #eeeeee
    #eaffc4
    #b6c399
    #6a856a
    #333333
    */
    
    body {
      background-color: #333333;
      font-family: monospace;
      display: flex;
      justify-content: center;
    }
    
    div {
      /*background-color: red;*/
      width: 100%;
      height: 100%;
      justify-content: center;
    }
    
    /*aesthetics for header*/
    .Ghead {
      font-size: 250%;
      color: #eeeeee;
      font-weight: lighter;
      text-align: center;
      border-color: red;
    }
    
    /*color for the 3 lines*/
    hr:nth-child(1) {
      border-color: #eaffc4;
      max-width: 20%;
    }
    
    hr:nth-child(2) {
      border-color: #b6c399;
      max-width: 25%;
    }
    
    hr:nth-child(3) {
      border-color: #6a856a;
      max-width: 30%;
    }
    
    /*style for radio button container*/
    .mGalD {
      position: relative;
      /*background-color: blue;*/
      display: flex;
    }
    
    input[type=radio] {
      display:none;
    }
    
    /*handles aesthetics of active buttons*/
    label {
      padding: 5px 7px;
      border-radius: 5px;
      display: inline-block;
      font-size: 14px;
      color: #6a856a;
    }
    
    input:checked + label {
      background-color: #eaffc4;
    }
    
    /*handles the appearance of active divs in the display area*/
    label + div {
      position: relative;
      color: red;
      border: 2pt solid #eaffc4;
      border-radius: 5px;
      margin: 5px 0 0 0;
      display: none;
      max-width: 50%;
    }
    
    input:checked + label + div {
      display: block;
    }

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <link href="./NewbTests.css" rel="stylesheet" type="text/css">
        <link rel="shortcut icon" type="image/png" href="./Assets/SumisoulLogo.png">
        <title>Viewport</title>
      </head>
    
      <body>
        <div>
          <h1>
            <!--title and aesthetics for the head of the page-->
            <div class="Ghead">
              Viewport
              <hr>
              <hr>
              <hr>
            </div>
          </h1>
    
            <!--Labeled Radio buttons which activate css to reveal divs-->
            <div class="mGalD">
              <input type="radio" name="gal" id="g1" value="1">
                <label for="g1">gallery 1</label><div>one</div>
              <input type="radio" name="gal" id="g2" value="2">
                <label for="g2">gallery 2</label><div>two</div>
              <input type="radio" name="gal" id="g3" value="3">
                <label for="g3">gallery 3</label><div>three</div>
            </div>
    
        </div>
      </body>
    </html>

我会链接一些图片来说明正在发生的事情，但我的链接有限。

本质上；前：（按钮 1）（按钮 2）（按钮 3）

点击任意按钮后：（按钮 1）[_______________________]（按钮 2）（按钮 3）

div 显示在相应按钮的侧面。我真的不知道该怎么做才能让它在一列中对齐而不分隔所有 div 并破坏按钮的内联样式

Answer 1

希望这个有用

  body, html {
  padding: 0;
  margin: 0;
}

body {
  background: linear-gradient(top left, red, orange);
}

span {
  display: none;
  position: absolute;
  max-width: 450px;
  left: 17px;
  top: 48px;
  padding: 3px;
  min-height: 30px;
  border-top: 1px solid #d3d3d3;
}

label {
  cursor: pointer;
  display: inline-block;
  padding: 10px;
  margin: 10px 0 0 0;
  background: #e0e0e0;
  color: black;
}
label:first-child {
  margin-left: 10px;
}

input {
  display: none;
}
input:checked + span {
  display: initial;
}

h3 {
  border-top: 1px solid;
  padding-top: 5px;
  position: absolute;
  top: 150px;
  left: 15px;
}

<label for="btn_one">Gallery 1</label>
<input type="radio" id="btn_one" name="nesto" checked="checked"/>
<span class="tab1">Gallery One</span>
<label for="btd_two">Gallery 2</label>
<input type="radio" id="btd_two" name="nesto"/>
<span class="tab2">Gallery two</span>
<label for="btd_tree">Gallery 3</label>
<input type="radio" id="btd_tree" name="nesto"/>
<span class="tab2">Gallery Three</span>

CSS 和编码的新手。为初学者画廊组织单选按钮和 div

New to CSS and coding. Organizing radio buttons and divs for a beginner gallery

html

css

position

radio

flexbox