将页面拆分为2个部分

Question

我目前有以下代码。

圆形按钮基本上是导航按钮。第二个div是我有一个可折叠列表的地方。

我想要在导航的右侧列表。

我试图包装div，也使用float作为左侧，由于某些原因，它仍然无法正常工作。如果有人可以协助？

html, body { 
 
    background-color: #fff; 
 
    color: rgba(255, 43, 62, 0.84); 
 
    font-family: 'Raleway', sans-serif; 
 
    font-weight: 100; 
 
    height: 100vh; 
 
    margin: 10px; 
 
} 
 

 

 
.links > a { 
 
    color: #ffffff; 
 
    padding-top: 0; 
 
    padding-right: 50px; 
 
    padding-left: 50px; 
 
    padding-bottom: 100px; 
 
    font-size: 14px; 
 
    font-weight: 600; 
 
    letter-spacing: .1rem; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
} 
 

 

 

 
.round-button { 
 
    width:8%; 
 
} 
 
.round-button-circle { 
 
    width: 100%; 
 
    height:0; 
 
    padding-bottom: 100%; 
 
    margin: 10%; 
 
    border-radius: 110%; 
 
    border:3px solid #56660d; 
 
    overflow:hidden; 
 

 
    background: #abc729; 
 
    box-shadow: 0 0 3px gray; 
 
} 
 
.round-button-circle:hover { 
 
    background: #56660d; 
 
} 
 
.round-button a { 
 
    display:inline-block; 
 
    float:left; 
 
    width:100%; 
 
    padding-top:45%; 
 
    padding-bottom:50%; 
 
    line-height:1em; 
 
    text-align:center; 
 
    color: #ffffff; 
 
    font-family:Verdana; 
 
    font-size:0.70em; 
 
    font-weight:bold; 
 
    text-decoration:none; 
 
    position: relative; 
 

 
}

<div class="circle-flex-center cirlce-position-ref circle-full-height"> 
 
     <div class="round-button"> 
 
      <div class="round-button-circle"> 
 
       <a href="student-personaldetails" class="round-button">Personal & Placement Details</a> 
 
      </div> 
 
     </div> 
 

 

 
     <div class="round-button"> 
 
      <div class="round-button-circle"> 
 
       <a href="student-tutordetails" class="round-button">Tutor Details</a> 
 
      </div> 
 
     </div> 
 

 

 
     <div class="round-button"> 
 
      <div class="round-button-circle"> 
 
       <a href="student-placementassignment" class="round-button">Assignments & Examples</a> 
 
      </div> 
 
     </div> 
 

 

 
     <div class="round-button"> 
 
      <div class="round-button-circle"> 
 
       <a href="student-markscheme" class="round-button">Mark Scheme</a> 
 
      </div> 
 
     </div> 
 

 

 
     <div class="round-button"> 
 
      <div class="round-button-circle"> 
 
       <a href="student-submission" class="round-button">Submission</a> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 
<div class="panel-group" id="accordion"> 
 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h4 class="panel-title"> 
 
         <a href="#collapseone" data-toggle="collapse" data-parent="#accordion"> 
 
          Monthly Reflection 
 
         </a> 
 
        </h4> 
 
       </div> 
 
       <div id="collapseone" class="panel-collapse collapse "> 
 
        <div class="panel-body"> 
 
sjfhdkjs 
 
</div> 
 
       </div> 
 
      </div> 
 

 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h4 class="panel-title"> 
 
         <a href="#collapsetwo" data-toggle="collapse" data-parent="#accordion"> 
 
          Reflection Example 
 
         </a> 
 
        </h4> 
 
       </div> 
 
       <div id="collapsetwo" class="panel-collapse collapse"> 
 
        <div class="panel-body"> 
 
adfjkldsf 
 
</div> 
 
       </div> 
 
      </div> 
 

 

 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h4 class="panel-title"> 
 
         <a href="#collapsethree" data-toggle="collapse" data-parent="#accordion"> 
 
          Tutor Visits 
 
         </a> 
 
        </h4> 
 
       </div> 
 
       <div id="collapsethree" class="panel-collapse collapse"> 
 
        <div class="panel-body"> 
 
dilfsklsdgs 
 
</div> 
 
       </div> 
 
      </div> 
 

 

 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h4 class="panel-title"> 
 
         <a href="#collapsefour" data-toggle="collapse" data-parent="#accordion"> 
 
          Reports 
 
         </a> 
 
        </h4> 
 
       </div> 
 
       <div id="collapsefour" class="panel-collapse collapse"> 
 
        <div class="panel-body"> 
 
sfjksdf 
 
</div> 
 
       </div> 
 
      </div> 
 

 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h4 class="panel-title"> 
 
         <a href="#collapsefive" data-toggle="collapse" data-parent="#accordion"> 
 
          Report Example 
 
         </a> 
 
        </h4> 
 
       </div> 
 
       <div id="collapsefive" class="panel-collapse collapse"> 
 
        <div class="panel-body"> 
 
difks;ldsf 
 

 
</div> 
 
       </div> 
 
      </div> 
 

 
     </div>

Answer 1

一点点重组你的CSS。我希望有所帮助。

html, body { 
 
    background-color: #fff; 
 
    color: rgba(255, 43, 62, 0.84); 
 
    font-family: 'Raleway', sans-serif; 
 
    font-weight: 100; 
 
    height: 100vh; 
 
    margin: 10px; 
 
} 
 

 
.circle-flex-center{ 
 
    width: 80px; 
 
} 
 

 
.round-button{ 
 
    text-align: center; 
 
    width: 65px; 
 
    height: 65px; 
 
    padding: 15px; 
 
    margin: 5px; 
 
    border:3px solid #56660d; 
 
    background-color: #abc729; 
 
    border-radius: 110%; 
 
    box-shadow: 0 0 3px gray; 
 
    float: left; 
 
} 
 
.round-button a{ 
 
    padding: 5px; 
 
    line-height:1em; 
 
    color: #ffffff; 
 
    font-family:Verdana; 
 
    font-size:0.60em; 
 
    font-weight:bold; 
 
    text-decoration:none; 
 
} 
 
.round-button:hover{ 
 
    background: #56660d; 
 
} 
 
.panel-group{ 
 
    float: right; 
 
    margin-top: -65%; 
 
} 
 

 

 
.links > a { 
 
    color: #ffffff; 
 
    padding-top: 0; 
 
    padding-right: 50px; 
 
    padding-left: 50px; 
 
    padding-bottom: 100px; 
 
    font-size: 14px; 
 
    font-weight: 600; 
 
    letter-spacing: .1rem; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
}

<div class="circle-flex-center cirlce-position-ref circle-full-height"> 
 
     <div class="round-button"> 
 
      <div class="round-button-circle"> 
 
       <a href="student-personaldetails" >Personal & Placement Details</a> 
 
      </div> 
 
     </div> 
 

 

 
     <div class="round-button"> 
 
      <div class="round-button-circle"> 
 
       <a href="student-tutordetails" >Tutor Details</a> 
 
      </div> 
 
     </div> 
 

 

 
     <div class="round-button"> 
 
      <div class="round-button-circle"> 
 
       <a href="student-placementassignment" >Assignments & Examples</a> 
 
      </div> 
 
     </div> 
 

 

 
     <div class="round-button"> 
 
      <div class="round-button-circle"> 
 
       <a href="student-markscheme" >Mark Scheme</a> 
 
      </div> 
 
     </div> 
 

 

 
     <div class="round-button"> 
 
      <div class="round-button-circle"> 
 
       <a href="student-submission" >Submission</a> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 
<div class="panel-group" id="accordion"> 
 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h4 class="panel-title"> 
 
         <a href="#collapseone" data-toggle="collapse" data-parent="#accordion"> 
 
          Monthly Reflection 
 
         </a> 
 
        </h4> 
 
       </div> 
 
       <div id="collapseone" class="panel-collapse collapse "> 
 
        <div class="panel-body"> 
 
sjfhdkjs 
 
</div> 
 
       </div> 
 
      </div> 
 

 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h4 class="panel-title"> 
 
         <a href="#collapsetwo" data-toggle="collapse" data-parent="#accordion"> 
 
          Reflection Example 
 
         </a> 
 
        </h4> 
 
       </div> 
 
       <div id="collapsetwo" class="panel-collapse collapse"> 
 
        <div class="panel-body"> 
 
adfjkldsf 
 
</div> 
 
       </div> 
 
      </div> 
 

 

 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h4 class="panel-title"> 
 
         <a href="#collapsethree" data-toggle="collapse" data-parent="#accordion"> 
 
          Tutor Visits 
 
         </a> 
 
        </h4> 
 
       </div> 
 
       <div id="collapsethree" class="panel-collapse collapse"> 
 
        <div class="panel-body"> 
 
dilfsklsdgs 
 
</div> 
 
       </div> 
 
      </div> 
 

 

 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h4 class="panel-title"> 
 
         <a href="#collapsefour" data-toggle="collapse" data-parent="#accordion"> 
 
          Reports 
 
         </a> 
 
        </h4> 
 
       </div> 
 
       <div id="collapsefour" class="panel-collapse collapse"> 
 
        <div class="panel-body"> 
 
sfjksdf 
 
</div> 
 
       </div> 
 
      </div> 
 

 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h4 class="panel-title"> 
 
         <a href="#collapsefive" data-toggle="collapse" data-parent="#accordion"> 
 
          Report Example 
 
         </a> 
 
        </h4> 
 
       </div> 
 
       <div id="collapsefive" class="panel-collapse collapse"> 
 
        <div class="panel-body"> 
 
difks;ldsf 
 

 
</div> 
 
       </div> 
 
      </div> 
 

 
     </div>