使用html在两列中显示内容

时间:2017-10-29 19:13:31

标签: css html5 two-column-layout

我正在尝试在HTML5中的两列中显示内容。但是,不知何故,我做错了什么。这是我的HTML代码



.column1 {
  float: left;
  width: 70%;
}

<div class="cd-admin-upper-container container-fluid">
  <div class="row">
    <div class="column1">
      <h1>Device UnAssignment</h1>
      <div>
        <div class="alert alert-info" style="height : 50%; margin-bottom : 2vw;width: 40%">
          <label class="cd-admin-create-modal-label">Patient Name: </label>
          <label class="cd-admin-create-modal-label">Device Serial Number: </label>
        </div>
        <div>
          <button type="submit" class="btn btn-primary" style="margin-left: 3%"
          ng-click="unassignDevice(device.patientId);"><span title="UnAssign Device"></span> UnAssign
          </button>
        </div>
      </div>
      <div class="column2">
        <h1>Device Assignment</h1>
        <p>Hello this is column two</p>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

这里是JSFiddle链接 - http://jsfiddle.net/chandham/k39vpafd/

1 个答案:

答案 0 :(得分:-1)

我以某种方式在同一个div中嵌套了column1和column2。这是更新的代码。

<div class="cd-admin-upper-container container-fluid">
    <div class="row">
        <div class="column1">
            <h1>Device UnAssignment</h1>
            <div class="alert alert-info" style="height : 50%; margin-bottom : 2vw;width: 40%">
                <label class="cd-admin-create-modal-label">Patient Name: </label>
                <label class="cd-admin-create-modal-label">Device Serial Number: </label>
            </div>
            <div>
                <button type="submit" class="btn btn-primary" style="margin-left: 3%" ng-click="unassignDevice(device.patientId);"><span title="UnAssign Device"></span> UnAssign
                </button>
            </div>
        </div>
        <div class="column2">
            <h1>Device Assignment</h1>
            <p>Hello this is column two</p>
        </div>
    </div>
</div>