html - 在 VS 预制样式中对齐 DIV 部分-6ren

html - 在 VS 预制样式中对齐 DIV 部分

转载作者：太空宇宙更新时间：2023-11-04 03:42:41

我创建了一个 Intranet 网站，它有一个默认样式，调用保存在 site.css 文件中。我正在尝试并排放置两个 div 部分。在我的例子中，我希望搜索和排序 div 位于左侧，数据表 div 位于右侧。对于所有预构建的样式，我都无法使其正常工作。我希望两个 div 都排成一行，但搜索排序会更瘦。我一直在努力让它工作，但没有任何运气，希望有人能帮助它设置或为我指明正确的方向。

这是我的看法:

model  PagedList.IPagedList<ApIssues.Models.AP_Tasks>
@using System.Data.SqlClient
@using PagedList.Mvc;


@{
    ViewBag.Title = "Index";
}





     /* features */
     section.feature {
        float: none;
        padding: 10px;
        width: auto;
     }

        section.feature img {
            color: #999;
            content: attr(alt);
            font-size: 1.5em;
            font-weight: 600;
        }

    /* forms */
    input {
        width: 90%;
    }

    /* login page */
    #loginForm {
        border-right: none;
        float: none;
        width: auto;
    }

        #loginForm .validation-error {
            display: block;
            margin-left: 15px;
        }

    #socialLoginForm {
        margin-left: 0;
        float: none;
        width: auto;
    }


    /* footer
    ----------------------------------------------------------*/
    footer .float-left,
    footer .float-right {
        float: none;
    }

    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }

        footer p {
            margin: 0;
        }
}

这里是渲染 View 9，为了满足发布标准，移除了部分:

<html lang="en" class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head>
        <meta charset="utf-8">
        <title>Index - My ASP.NET MVC Application</title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
        <meta name="viewport" content="width=device-width">
        <link href="/Content/site.css" rel="stylesheet">

        <script src="/Scripts/modernizr-2.6.2.js"></script>

        <link href="/Content/PagedList.css" rel="stylesheet" type="text/css">
        <link href="/Content/jHtmlArea/JHtmlArea.css" rel="stylesheet" type="text/css">
        <link href="/Content/jHtmlArea/JHtmlArea.Editor.css" rel="stylesheet" type="text/css">

    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title"><a href="/">Pacific Power Group</a></p>
                </div>
                <div class="float-right">
                    <section id="login">
                       Hello, <span class="username">PACIFICDDA\ajohnson</span>!
                    </section>

                </div>
            </div>
        </header>
        <div id="body">

            <section class="content-wrapper main-content clear-fix">




    <div id="task-table" class="issue-table">
        <h2>A/P Issues</h2>
        <p class="filter-table">Search : <input type="search" placeholder="Keyword" name=""></p><table class="data-table">
            <thead>
                <tr>
                    <th>
                        <a href="/apissues?sortOrder=TaskID">Task ID</a>
                    </th>
                    <th>
                        <a href="/apissues?sortOrder=TaskDate">Task Date</a>
                    </th>
                    <th>
                        <a href="/apissues?sortOrder=InvDate">Invoice Date</a>
                    </th>

                    <th>
                        <a href="/apissues?sortOrder=PO">PO #</a>
                    </th>



                    <td>
                        <a href="/apissues/Edit/25">Edit</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="/apissues/Task/26">26</a>
                    </td>
                    <td>
                        01/02/2006
                    </td>
                    <td>

                    </td>
                    <td>
                        6046037
                    </td>
                    <td>

                    </td>
                    <td>
                        R
                    </td>
                    <td>
                        TRAMONT
                    </td>
                    <td>
                        AMURPHY
                    </td>
                    <td>
                        SGULLEDGE
                    </td>
                    <td>
                        01/02/2006
                    </td>
                    <td>
                        02/02/2006
                    </td>
                    <td>
                        2
                    </td>
                    <td>
                        0
                    </td>
                    <td>
                        02/02/2006
                    </td>
                    <td>
                        KENT
                    </td>


                    <td>
                        <a href="/apissues/Edit/26">Edit</a>
                    </td>
                </tr>

        </tbody></table>
        <div id="Paging" style="text-align:center">
            Page 1
            of 1613

            <div class="pagination-container"><ul class="pagination"><li class="active"><a>1</a></li><li><a href="/apissues?page=2">2</a></li><li><a href="/apissues?page=3">3</a></li><li><a href="/apissues?page=4">4</a></li><li><a href="/apissues?page=5">5</a></li><li><a href="/apissues?page=6">6</a></li><li><a href="/apissues?page=7">7</a></li><li><a href="/apissues?page=8">8</a></li><li><a href="/apissues?page=9">9</a></li><li><a href="/apissues?page=10">10</a></li><li class="disabled PagedList-ellipses"><a>…</a></li><li class="PagedList-skipToNext"><a href="/apissues?page=2" rel="next">»</a></li><li class="PagedList-skipToLast"><a href="/apissues?page=1613">»»</a></li></ul></div>
        </div>
    </div>
    </section></div>
    <div id="search" class="search-sort-section">
        <h2>Search and Sort</h2>

<form action="/ApIssues" method="post">            <p>
                <label for="Company:_">Company: </label>
                <select id="company" name="company"><option value=""> </option>
<option>Perkins Pacific</option>
<option>PERKINS POWER NORTHEAST</option>
<option>Pacific Truck Performance</option>
<option>NorthTrends Production</option>
<option>Pacific Detroit Diesel-Allison</option>


<option>Spokane</option>
<option>Springfield</option>
</select>

                <label for="Warehouse:_">Warehouse: </label>
                <select id="warehouse" name="warehouse"><option value=""> </option>
<option>82PK</option>
<option>Anch</option>

<option>Nakn</option>
<option>PGEN</option>
<option>PGRF</option>
<option>PPNE</option>
<option>PPRF</option>
<option>PROD</option>
<option>Psco</option>

<option>Spok</option>
<option>Sprf</option>
</select>

                <label for="Past_Due_Only:_">Past Due Only: </label>
                <select id="pastDue" name="pastDue"><option value=""> </option>
<option>Yes</option>
<option>No</option>
</select>

                <label for="Assigned_To_By:_">Assigned To/By: </label>
                <select id="assignedToBy" name="assignedToBy"><option value=""> </option>
<option>ABARTON</option>
<option>ABYERS</option>
<option>ACHAVEZ</option>
<option>ADALESANDRO</option>
<option>ADIERKS</option>
<option>ADMINISTRATOR</option>
<option>AKALLENBERGER</option>
<option>ALITTLE</option>
<option>AMACHIN</option>
<option>AOLSON</option>
<option>APATSEL</option>


</select>

            </p>
            <p>
                <label for="Open___Completed:_">Open / Completed: </label>
                <select id="openco" name="openco"><option value=""> </option>
<option>Open</option>
<option>Completed</option>
</select>

                <label for="Sort_By:_">Sort By: </label>
                <select id="sortBy" name="sortBy"><option value=""> </option>
<option>Task ID</option>
<option>Warehouse</option>
<option>Assigned To</option>
<option>PO Number</option>
<option>Task Date</option>
</select>

                <label for="PO__:_">PO #: </label>
                <input id="poNumber" name="poNumber" type="text" value="">
                <label for="Freight__:_">Freight #: </label>
                <input id="freightNumber" name="freightNumber" type="text" value="">
                <label for="Vendor_Name:_">Vendor Name: </label>
                <input id="vendorName" name="vendorName" type="text" value="">
            </p>
            <p>
                <label for="Issue_Date">Issue Date</label>
                <input id="beginIssueDate" name="beginIssueDate" type="text" value="" class="hasDatepicker"> - <input id="endIssueDate" name="endIssueDate" type="text" value="" class="hasDatepicker">

                <label for="Invoice_Date">Invoice Date</label>
                <input id="beginInvoiceDate" name="beginInvoiceDate" type="text" value="" class="hasDatepicker"> - <input id="endInvoiceDate" name="endInvoiceDate" type="text" value="" class="hasDatepicker">
                <label for="Completed_Date">Completed Date</label>
                <input id="beginCompletedDate" name="beginCompletedDate" type="text" value="" class="hasDatepicker"> - <input id="endCompletedDate" name="endCompletedDate" type="text" value="" class="hasDatepicker">

            </p>
            <p style="float: right">
                <input type="submit" value="Go">
                <input type="button" value="Printable View" onclick="location.href='/ApIssues/PrintablePdf' ">
                <input type="button" value="Add New Task" onclick="location.href='/ApIssues/Create' ">
                <input type="button" value="Reporting" onclick="location.href='/ApIssues/Reporting' ">
            </p>
</form>

    </div>



<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"8b36f6c8b2764fc79ab3f2d547c4b742"}
</script>
<script type="text/javascript" src="http://localhost:49750/7a324d252cb14079b2ebe1fa5ff67dc0/browserLink" async="async"></script>
<!-- End Browser Link -->





    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://sunnywalker.github.io/jQuery.FilterTable/jquery.filtertable.min.js"></script>
    <script src="/Scripts/Additional JS/jquery.tablesorter.js"></script>
    <script src="http://kryogenix.org/code/browser/sorttable/sorttable.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script type="text/javascript">
        $(document).ready(function () {
            $('table').filterTable(
            {
                minRows: 1,
                label: "Search :",
                inputSelector: "#quickFilter",
                placeholder: "Keyword"
            });
        });
        $("#beginIssueDate").datepicker();
        $("#endIssueDate").datepicker();
        $("#beginInvoiceDate").datepicker();
        $("#endInvoiceDate").datepicker();
        $("#beginCompletedDate").datepicker();
        $("#endCompletedDate").datepicker();
    </script><div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>











</body></html>

最佳答案

HTML/ Razor

@{
    ViewBag.Title = "Index";
}

<!-- Issue-table before search-sort-section when floating right -->
<div class="container">
    <div class="issue-table">
        <h2>A/P Issues</h2>
        <table class="data-table">
            . . .
        </table>

        <br />
        <div id='Paging' style="text-align:center">
        </div>
    </div>

    <div class="search-sort-section">
        <h2>Search and Sort</h2>
        <!-- Rest of the code -->
        . . .
    </div>
</div>

CSS

.issue-table {
    background: #787878;
    padding: 0px ;
    float: right;
    width:49%;
}

.container {
    margin-left:auto;
    margin-right:auto;
    width:1200px;
}

.search-sort-section {
    background: #787878;
    margin: 0 auto;
    box-shadow: 10px 10px 5px #888888;
    font-size: 12px;
    padding: 10px;
    padding-top: 0px !important;
    margin-bottom: 20px;
    float: left;
    width:45%;
}

编辑:

您呈现的 HTML 显示您的 search-sort-section div 放置在 ID 为“Body”的 div 之外，这会造成您的问题，因为您的两个 div 不在同一个容器中。所以我改变了我的标记以反射(reflect)输出应该是什么。将 issue-table 和 search-sort-section div 放在同一个 container div 中。给容器一个你选择的宽度(100% 将是屏幕的最大宽度)，然后相应地调整你的 issue-table 和 search-sort-section div 的宽度为了满足您的需求，只需确保它们不会相互重叠，否则它们会被放置在彼此之上。

我还强烈建议您将搜索条件放在一个表格中，就像我在这里所做的那样:http://jsfiddle.net/zpFSL/2/

关于html - 在 VS 预制样式中对齐 DIV 部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24642547/

文章推荐： c - 如何使用 fork() 通过服务器连接两个客户端

文章推荐： linux - phpinfo() 在浏览器中未显示正确的版本

文章推荐： c - 一个作者，多个读者在无锁应用中

文章推荐： html - Mailchimp 超薄订阅表格 - 水平布局

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

html - 在 VS 预制样式中对齐 DIV 部分