如何分割HTML页面

Question

我想制作一个包含三个部分的html页面，并且在每个部分的内部将其分为左右两部分。在每个部分中，我有三个框，我想在左边放两个框，然后在右边放一个框，下面是css和html代码：

trace

.leftbox {
		width: 50%;
		padding: 5px;
		float: left;
		
	}

	.rightbox {
		width: 50%;
		padding: 5px;
		float: right;
		
	}

我收到以下结果，我不知道为什么防护选项跳到右侧。

这是我工作的图像：

Answer 1

我使用Bootstrap框架将其写下来。它与您的图像完全匹配。

如果您想分叉并玩耍它，可以使用 Codepen 。它也很敏感。

/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto');

html, body {
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>


<div class="container p-5">
  <div class="row">
    <div class="col-sm-12">
      <h5 class="title text-uppercase bg-success text-white p-1">Rotation Forms</h5>
      <h4 class="mb-3 mt-3">Details</h4>
    </div>
    <div class="col-sm-12 col-md-6">
      <div class="form-group">
        <label for="mob">Mob</label>
        <input type="text" class="form-control" id="mob" placeholder="Enter Mob">
      </div>
      <div class="form-group">
        <label for="paddock">Paddock</label>
        <input type="text" class="form-control" id="paddock" placeholder="Enter Paddock">          
      </div>
    </div>
    <div class="col-sm-12 col-md-6">
      <div class="form-group">
        <label for="date">Date</label>
        <input type="date" class="form-control" id="date" placeholder="Enter Date">          
      </div>      
      <h4 class="mb-3 mt-3">Fencing Options</h4>
      <div class="form-group">
        <label for="avail">Available Today</label>
        <input type="text" class="form-control" id="avail" placeholder="NaN">          
      </div>
      <div class="form-group">
        <label for="allocation">Paddock Allocation %</label>
        <input type="number" class="form-control" id="allocation" placeholder="100">          
      </div>
      <div class="form-group">
        <label for="result">Required Result</label>
        <input type="text" class="form-control" id="result" placeholder="NaN">          
      </div>      
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-6">
      <h4 class="mb-3 mt-3">Assign As Task</h4>
      <div class="form-group">
        <label for="assign">Assign to</label><br>
        <button type="submit" class="btn btn-success btn-md" id="assign">Add</button>       
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="checked">
        <label class="form-check-label" for="checked">I want to see this too.</label>
      </div>
      <button type="button" class="btn btn-success btn-md">Save</button>
      <button type="button" class="btn btn-success btn-md">Cancel</button>
    </div>    
  </div>
</div>