我创建了一个 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/