html - 如何划分html页面

Question

我想制作一个包含三个部分的 html 页面，每个部分将其分为左右两部分。在每个部分我有三个盒子，我想在左边放两个盒子，在右边放一个盒子下面是 css 和 html 代码:

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

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

<div id="rotationFormPopup" class="rotationFormPopup" style="width: 900px; display: none; background: #FFF; border: 1px solid; padding: 10px; margin-top: 100px;">
	<h2 class="popup-header">Rotation Forms</h2>

	<div class="newRotation-sections">


		<h3>Details</h3>
		<div class="newRotation-section-1" style="margin-top: 10px;">

			<div class="leftbox">
				<span>Mob</span> <br />
				<input type="text" class="newRotation-mob" style="width: 100%;"><br /><br />

				<span>Paddock</span> <br />
				<input type="text" class="newRotation-paddock" style="width: 100%;"><br /><br />
			</div>
			<div class="rightbox">

				<span>Date</span> <br />
				<input type="text" class="newRotation-date" style="position: relative; display: inline-block; float: left; width: 100%; margin-top: 10px;"><br /><br />
			</div>

		</div>
		
		<h3>Fencing options</h3>
		
		<div class="newRotation-section-2" style="margin-top: 10px;">
			<div class="leftbox">

				<span>Available Today</span> <br />
				<input type="text" class="newRotation-available" style="width: 100%;"><br /><br />

				<span>Paddock Allocation %</span> <br />
				<input type="number" class="newRotation-alloc" value="50" style="width: 100%;"><br /><br />

			</div>
			<div class="rightbox">
				<span>Required Result</span> <br />
				<input type="text" class="newRotation-result" style="width: 100%;"><br /><br />
			</div>

		</div>
		<h3>Assign As Task</h3>
		  </div>
 </div>
</div>

我收到下面的结果，我不知道为什么 fencing 选项会跳到右边。

这是我的作品图片:

Answer 1

我使用 Bootstrap 框架编写了这篇文章。它与您的图像完全匹配。

有一个 Codepen 如果你想 fork 和玩弄它。它也很灵敏。

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