html - 在网页上定位 3 个 Bootstrap Jumbotrons

Question

这是我登录网页的部分代码...

<div class="container-fluid align-content-center"   >

                    <div class="col-md-12">

*This is the 1st jumbotron for displaying the client logo*
                        <div class="jumbotron align-content-right col-4 float-right" style="background-color:White">
                      <div class="form-group align-content-center">
<%--                        <div style="float:none">--%>


                                                                          <asp:Image ID="imglogo" runat="server"  />
       <%--                 </div>--%>
                    </div>   
                        </div>

*This is the 2nd jumbotron for displaying the product logo and holds text fields for entering login credentials*
             <div class="jumbotron align-content-left col-5 " style="background-color:White; border: 5px; border-color:red">

                     <div class="form-group">

                                            <asp:Image ID="imgcubelogo" runat="server"  ImageUrl="~/IMAGES/erp big.jpg" />
                    </div>


                                <div class="form-group">
                                    <asp:Label ID="lblCompany" runat="server" Text="Company Name" class="form-control"></asp:Label>
                                </div>
                                <div class="form-group">
                                    <asp:DropDownList ID="cboCompany" runat="server" class="form-control" AutoPostBack="True" OnSelectedIndexChanged="cboCompany_SelectedIndexChanged"></asp:DropDownList>
                                </div>
                                <div class="form-group">
                                    <asp:Label ID="Label2" runat="server" Text="Financial Year" class="form-control"> </asp:Label>
                                </div>
                                <div class="form-group">
                                    <asp:DropDownList ID="ddlfinalcialyear" runat="server" class="form-control"></asp:DropDownList>
                                </div>
                                <div class="form-group">
                                    <asp:TextBox ID="TxtUsername" runat="server" TextMode="singleline" class="form-control" placeholder="Enter Username" TabIndex="1"></asp:TextBox>
                                </div>
                                <div class="form-group">
                                    <asp:TextBox ID="TxtPassword" runat="server" TextMode="Password" class="form-control" placeholder="Enter Password" TabIndex="2"></asp:TextBox>
                                </div>
                                <div class="form-group">
                                    <asp:Button ID="btnlogin" runat="server" Text="Login" class="form-control" TabIndex="3" />
                                </div>
                                <div class="form-group">
                                    <asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton1_Click" Font-Size="Medium" Style="margin-right: 30px;" TabIndex="4">Change Password</asp:LinkButton>
                                </div>
                                <div class="form-group">
                                    <asp:Label ID="lblMessage" runat="server" ForeColor="#FF8080" Text=":" Visible="False"></asp:Label>
                                    </div>


                        </div>

*This is the 3rd jumbotron for displaying the company logo*
                 <div class="jumbotron align-content-right col-4 float-right" style="background-color:White; border: 25px; border-color:red">
                                <div class="form-group align-content-right">

                                                                        <asp:Image ID="Image2" runat="server"  ImageUrl="~/IMAGES/eshabu.jpg" />       
                    </div>


                                               </div>
                    </div>

显示了这些超大屏幕在网页上的当前位置； This is the top half of the page where you can see jumbotrons 1 and 2和 this is the bottom half of the page where you can see the 3rd jumbotron too.

如您所见，第三个超大屏幕仅出现在页面底部，只有向下滚动后才能看到。我希望它沿着同一条线出现在第一个超大屏幕下方一点点。这样，我就能同时看到所有 3 个超大屏幕的内容。我已经研究了好几天了；仍然没有想出解决办法。请帮忙。

(我真的没有太多的编码经验，我还在学习中。)

Webpage after suggested edit

Answer 1

如果您在第一个超大屏幕上使用 float right 属性，则需要在第二个超大屏幕上添加 float left 属性。因为如果您不将 float left 添加到第二个超大屏幕，它将占据全宽。第三个超大屏幕将在第一个和第二个超大屏幕之后出现。

div{
  width: 100px;
  height: 100px;
  line-height: 100px;
  background-color: #eee;
  color: #000;
  margin: 10px;
  text-align: center;
}
.one{
  float: right;
}
.two{
  float: left;
}
.three{
  float: right;
  clear: both;
}

<div class="one">
  1
</div>
<div class="two">
  2
</div>
<div class="three">
  3
</div>