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个超大加速器仅出现在页面底部，并且只有向下滚动才能看到。我希望它显示在第一个超大加速器的下方，且沿同一直线。这样，我将能够一次看到所有3个超大型飞机的内容。我已经为此工作了几天。仍然没有找到解决方案。请帮忙。

（我确实没有太多的编码经验。我还在学习。）

Webpage after suggested edit

Answer 1

如果您将第一个巨型飞船使用向右浮动属性，则需要在第二个巨型飞船上添加向左浮动属性。因为如果您不将浮子添加到第二个巨型飞行器中，它将占据整个宽度。而第三个巨型波管将紧随第一和第二个巨型波管之后。

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>

Answer 2

您不需要任何额外的CSS来获取所需的布局。您可以简单地通过引导程序来实现。在您的代码上实现它，让我知道是否需要任何帮助。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-6">
    <div class="jumbotron">
      <h1 class="display-4">Jumbroton 2</h1>
      <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    </div>
  </div>
  <div class="col-sm-6">
    <div>
      <div class="jumbotron">
        <h1 class="display-4">Jumbroton 1</h1>
      </div>
      <div>
        <div class="jumbotron">
          <h1 class="display-4">Jumbroton 3</h1>
        </div>
      </div>
    </div>
  </div>
  <p>Powered by Echosoft</p>
</div>

在网页上放置3个自举巨人

2 个答案: