我创建了一个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;
}
}
这是渲染视图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>
答案 0 :(得分：2)
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显示您的搜索排序部分div被放置在ID为＆＃39; Body＆＃39;的div之外，这会产生您的问题，因为您的两个div都不是同一个容器。所以我改变了我的标记以反映输出应该是什么。将issue-table和search-sort-section div放在同一个container div中。为容器提供您选择的宽度（100％将是屏幕的最大宽度），然后相应地调整issue-table和search-sort-section div的宽度以满足您的需求，只需确保它们不会“39” ; t彼此重叠或者它们彼此重叠。
我强烈建议您在表格中包围搜索条件，就像我在此处所做的那样：http://jsfiddle.net/zpFSL/2/