我如何垂直对齐和堆叠我的选项卡和网格 div 以整齐地堆叠在彼此之上？
[英]How do I vertically align and stack both my tabs and grid divs to stack neatly on top of each other?
问题描述
As it stands, I see that my tab div is roughly 2px bigger than my grid div (to the right) -circled in red.
就目前而言，我看到我的选项卡 div 比我的网格 div（右边）大约大 2px - 用红色圈出。 How do I go about changing either the HTML markup or CSS to neatly stack both my tabs and grid divs on top of each other so that they line up.我 go 如何更改 HTML 标记或 CSS 以将我的选项卡和网格 div 整齐地堆叠在彼此之上，以便它们对齐。
I have attached a PIC of the problem as well as the expected result:我附上了问题的 PIC 以及预期的结果：
Here's the CSS and HTML in question:这是有问题的 CSS 和 HTML：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>MRSP Accomodations Manager</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<link rel="stylesheet" href="/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="/styles/jqx.classic.css" type="text/css" />
<script type="text/javascript" src="/scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/scripts/jqxcore.js"></script>
<script type="text/javascript" src="/scripts/jqxbuttons.js"></script>
<script type="text/javascript" src="/scripts/jqxscrollbar.js"></script>
<script type="text/javascript" src="/scripts/jqxmenu.js"></script>
<script type="text/javascript" src="/scripts/jqxgrid.js"></script>
<script type="text/javascript" src="/scripts/jqxgrid.selection.js"></script>
<script type="text/javascript" src="/scripts/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="/scripts/jqxdata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var source = {
datatype: "json",
datafields: [
{ name: 'LastName' },
{ name: 'FirstName' },
{ name: 'Floor', type: 'int' },
{ name: 'Office' }
],
id: 'id',
url: 'compile_data.asp'
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#grid").jqxGrid({
width: '100%',
height: '100%',
source: dataAdapter,
columnsresize: true,
columns: [
{ text: '<b>LastName</b>', datafield: 'LastName', width: 250 },
{ text: '<b>FirstName</b>', datafield: 'FirstName', width: 150 },
{ text: '<b>Floor</b>', datafield: 'Floor', width: 180 },
{ text: '<b>Office</b>', datafield: 'Office', width: 120 }
]
});
});
</script>
<style>
* {
font-family: Segoe UI;
font-size: 10.5pt;
margin:0;
padding:0;
}
.jqx-grid {
border-radius: 0 !important;
}
body {
height:100%;
}
header {
background-color: rgb(93,90,88);
color: white;
border: 0;
margin:0;
line-height: 25px;
padding-left: 2px;
}
footer {
position:absolute;
bottom:0;
margin:0;
border:0;
line-height:25px;
background-color: rgb(93,90,88);
width:100%;
color: #FFF;
padding-left: 2px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
#wrapper {
position:absolute;
width:100%;
margin:0;
}
#topbar {
line-height: 30px;
padding-left: 2px;
background-color: rgb(216,216,216);
color: rgb(76,83,92);
}
.center {
margin: auto;
border: 3px solid #73AD21;
padding: 10px;
}
.input_txt_search {
background: url(icons/search.png) no-repeat right;
background-size: 16px;
border: 1px solid rgb(171,173,179);
padding: 2px;
width: 200px;
background-color: #FFF;
}
.input_txt {
border: 1px solid rgb(171,173,179);
padding: 2px;
width: 200px;
}
.input_txt:hover, .input_txt_search:hover, .selectbox:hover {
border-color: rgb(93,90,88);
}
.selectbox {
width: 206px;
padding: 2px;
border: 1px solid rgb(171,173,179);
background: url(icons/arrow.png) no-repeat right #fff;
-webkit-appearance: none;
background-position-x: 182px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-background-clip: text;
color: white !important;
}
</style>
<style>
p {
margin: 0 0 20px;
line-height: 1.5;
}
.main {
margin: 0 auto;
width: 100%;
}
.content {
background: #fff;
border: 1px solid rgb(171,173,179);
}
.content>div {
display: none;
padding: 20px 25px 5px;
}
input[name="tabs"] {
display: none;
}
label {
display: inline-block;
text-align: center;
background-color: rgb(240, 240, 240);
border-top: 1px solid rgb(171,173,179);
border-left: 1px solid rgb(171,173,179);
border-right: 1px solid rgb(171,173,179);
width: 115px;
padding: 10px;
}
label:hover {
cursor: pointer;
background: rgb(196,196,196);
}
input[name="tabs"]:checked+label {
background: #fff;
color: #000;
border-top: 1px solid rgb(171,173,179);
border-left: 1px solid rgb(171,173,179);
border-right: 1px solid rgb(171,173,179);
border-bottom: 0px;
position: relative;
font-weight: bold;
}
input[name="tabs"]:checked+label::before {
content: '';
position: absolute;
width: 100%;
height: 1px;
background: #fff;
bottom: -1px;
right: 0;
left: 0;
margin: auto;
}
#tab1:checked~.content #content1,
#tab2:checked~.content #content2,
#tab3:checked~.content #content3,
#tab4:checked~.content #content4 {
display: block;
}
</style>
<%
sub add_new
Dim strSQL
strSQL = "INSERT INTO tbl_offices " & _
"(LastName, FirstName, Floor, Office) " & _
" VALUES (" & _
"'" & Request.Form("LastName") & "', " & _
"'" & Request.Form("FirstName") & "', " & _
"'" & Request.Form("Floor") & "', " & _
"'" & Request.Form("Office") & "' " & _
")"
Response.Write(strSQL)
end sub
%>
</head>
<body>
<header>MRSP Accomodations Manager</header>
<div id="wrapper">
<div id="topbar">
<form name="GO" method="post">
<input type="text" name="Search" class="input_txt_search" />
<input type = "submit" name="GO" value="GO"/>
<input type = "submit" name="Test" value="Test" onclick="test()"/>
</form>
<%
if Request.Form("GO") = "GO" then
search
End If
%>
</div><!-- End of DIV Wrapper -->
<div class="center">
<div id="content">
<div class="main">
<input id="tab1" type="radio" name="tabs" checked><label for="tab1">Office Info</label>
<input id="tab2" type="radio" name="tabs"><label for="tab2">Employee Info</label>
<input id="tab3" type="radio" name="tabs"><label for="tab3">Service Requests</label>
<input id="tab4" type="radio" name="tabs"><label for="tab4">Tokyo</label>
<div class="content">
<div id="content1">
<form method="post">
<table style="border-collapse: separate; border-spacing: 5px;">
<tr>
<td>FirstName:</td>
<td><input type="text" name="FirstName" class="input_txt" /></td>
</tr>
<tr>
<td>LastName:</td>
<td><input type="text" name="LastName" class="input_txt" /></td>
</tr>
<tr>
<td>Floor:</td>
<td><input type="text" name="Floor" class="input_txt"/></td>
</tr>
<tr>
<td>Office:</td>
<td><input type="text" name="Office" class="input_txt"/></td>
</tr>
<tr>
<td>Options:</td>
<td>
<select class="selectbox">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</td>
</tr>
<tr>
<td><input type = "submit" name="Submit" value = "Submit"/></td>
<td> </td>
</tr>
</table>
</form>
<%
If Request.Form("Submit") <> "" then
add_new
End If
%>
</div>
<div id="content2">
<p>
London is the capital city of England and the United Kingdom. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
<p>
London's ancient core, the City of London, largely retains its 1.12-square-mile (2.9 km2) mediaeval boundaries and in 2011 had a resident population of 7,375, making it the smallest city in England. Since at least the 19th century, the term London has
also referred to the metropolis developed around this core.
</p>
</div>
<div id="content3">
<p>
Mumbai is the capital city of the Indian state of Maharashtra. It is the most populous city in India, most populous metropolitan area in India, and the eighth most populous city in the world, with an estimated city population of 18.4 million and metropolitan
area population of 20.7 million as of 2011. Along with the urban areas, including the cities of Navi Mumbai, Thane, Bhiwandi, Kalyan, it is one of the most populous urban regions in the world.
</p>
<p>
Mumbai lies on the west coast of India and has a deep natural harbour. In 2009, Mumbai was named an alpha world city. It is also the wealthiest city in India, and has the highest GDP of any city in South, West or Central Asia.
</p>
</div>
<div id="content4">
<p>
Tokyo, officially Tokyo Metropolis, is one of the 47 prefectures of Japan. Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial
Palace, and the home of the Japanese Imperial Family.
</p>
<p>
Tokyo is in the Kantō region on the southeastern side of the main island Honshu and includes the Izu Islands and Ogasawara Islands. Tokyo Metropolis was formed in 1943 from the merger of the former Tokyo Prefecture and the city of Tokyo.
</p>
</div>
</div>
</div>
<div id="grid"></div>
</div><!-- END OF DIV #CONTENT-->
</div><!-- END OF DIV #CENTER -->
</div><!-- END OF DIV #WRAPPER -->
<footer>User: KELLYJ</footer>
</body>
</html>
1 个解决方案
解决方案1
0 2023-02-02 04:06:08
You can try apply following CSS to your grid div:您可以尝试将以下 CSS 应用于您的网格 div：
#grid {
box-sizing: border-box;
}
You can see the result in code snippet.您可以在代码片段中看到结果。
Hope it helps !希望能帮助到你 ！
$(document).ready(function () { var source = { datatype: "json", datafields: [ { name: 'LastName' }, { name: 'FirstName' }, { name: 'Floor', type: 'int' }, { name: 'Office' } ], id: 'id', url: 'compile_data.asp' }; var dataAdapter = new $.jqx.dataAdapter(source); $("#grid").jqxGrid({ width: '100%', height: '100%', source: dataAdapter, columnsresize: true, columns: [ { text: '<b>LastName</b>', datafield: 'LastName', width: 250 }, { text: '<b>FirstName</b>', datafield: 'FirstName', width: 150 }, { text: '<b>Floor</b>', datafield: 'Floor', width: 180 }, { text: '<b>Office</b>', datafield: 'Office', width: 120 } ] }); });
* { font-family: Segoe UI; font-size: 10.5pt; margin:0; padding:0; }.jqx-grid { border-radius: 0;important: } body { height;100%: } header { background-color, rgb(93,90;88): color; white: border; 0: margin;0: line-height; 25px: padding-left; 2px: } footer { position;absolute: bottom;0: margin;0: border;0: line-height;25px: background-color, rgb(93,90;88): width;100%: color; #FFF: padding-left; 2px: -webkit-box-sizing; border-box, /* Safari/Chrome: other WebKit */ -moz-box-sizing; border-box, /* Firefox: other Gecko */ box-sizing; border-box: } #wrapper { position;absolute: width;100%: margin;0: } #topbar { line-height; 30px: padding-left; 2px: background-color, rgb(216,216;216): color, rgb(76,83;92). }:center { margin; auto: border; 3px solid #73AD21: padding; 10px. }:input_txt_search { background. url(icons/search;png) no-repeat right: background-size; 16px: border, 1px solid rgb(171,173;179): padding; 2px: width; 200px: background-color; #FFF. }:input_txt { border, 1px solid rgb(171,173;179): padding; 2px: width; 200px. }:input_txt,hover. :input_txt_search,hover. :selectbox:hover { border-color, rgb(93,90;88). }:selectbox { width; 206px: padding; 2px: border, 1px solid rgb(171,173;179): background. url(icons/arrow;png) no-repeat right #fff: -webkit-appearance; none: background-position-x; 182px: } input,-webkit-autofill: input:-webkit-autofill,hover: input:-webkit-autofill,focus: input:-webkit-autofill:active { -webkit-background-clip; text: color; white:important; } p { margin: 0 0 20px. line-height; 1.5: };main { margin: 0 auto; width. 100%: };content { background: #fff, border, 1px solid rgb(171;173.179): };content>div { display: none; padding: 20px 25px 5px; } input[name="tabs"] { display: none; } label { display: inline-block; text-align: center, background-color, rgb(240; 240: 240), border-top, 1px solid rgb(171;173:179), border-left, 1px solid rgb(171;173:179), border-right, 1px solid rgb(171;173:179); width: 115px; padding: 10px: } label;hover { cursor: pointer, background, rgb(196;196:196): } input[name="tabs"];checked+label { background: #fff; color: #000, border-top, 1px solid rgb(171;173:179), border-left, 1px solid rgb(171;173:179), border-right, 1px solid rgb(171;173:179); border-bottom: 0px; position: relative; font-weight: bold: } input[name="tabs"]:checked+label:;before { content: ''; position: absolute; width: 100%; height: 1px; background: #fff; bottom: -1px; right: 0; left: 0; margin: auto. } #tab1,checked~:content #content1. #tab2,checked~:content #content2. #tab3,checked~:content #content3. #tab4:checked~;content #content4 { display: block; } #grid { box-sizing: border-box; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqx-all.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/styles/jqx.base.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/styles/jqx.energyblue.min.css" rel="stylesheet"/> <div id="wrapper"> <div id="topbar"> <form name="GO" method="post"> <input type="text" name="Search" class="input_txt_search" /> <input type = "submit" name="GO" value="GO"/> <input type = "submit" name="Test" value="Test" onclick="test()"/> </form> </div><:-- End of DIV Wrapper --> <div class="center"> <div id="content"> <div class="main"> <input id="tab1" type="radio" name="tabs" checked><label for="tab1">Office Info</label> <input id="tab2" type="radio" name="tabs"><label for="tab2">Employee Info</label> <input id="tab3" type="radio" name="tabs"><label for="tab3">Service Requests</label> <input id="tab4" type="radio" name="tabs"><label for="tab4">Tokyo</label> <div class="content"> <div id="content1"> <form method="post"> <table style="border-collapse; separate: border-spacing; 5px:"> <tr> <td>FirstName:</td> <td><input type="text" name="FirstName" class="input_txt" /></td> </tr> <tr> <td>LastName:</td> <td><input type="text" name="LastName" class="input_txt" /></td> </tr> <tr> <td>Floor:</td> <td><input type="text" name="Floor" class="input_txt"/></td> </tr> <tr> <td>Office:</td> <td><input type="text" name="Office" class="input_txt"/></td> </tr> <tr> <td>Options;</td> <td> <select class="selectbox"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> </td> </tr> <tr> <td><input type = "submit" name="Submit" value = "Submit"/></td> <td> .</td> </tr> </table> </form> <% If Request.Form("Submit") <> "" then add_new End If %> </div> <div id="content2"> <p> London is the capital city of England and the United Kingdom, It is the most populous city in the United Kingdom. with a metropolitan area of over 13 million inhabitants, Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans. who named it Londinium, </p> <p> London's ancient core, the City of London. largely retains its 1.12-square-mile (2,9 km2) mediaeval boundaries and in 2011 had a resident population of 7,375. making it the smallest city in England, Since at least the 19th century. the term London has also referred to the metropolis developed around this core. </p> </div> <div id="content3"> <p> Mumbai is the capital city of the Indian state of Maharashtra, It is the most populous city in India, most populous metropolitan area in India, and the eighth most populous city in the world. with an estimated city population of 18.4 million and metropolitan area population of 20.7 million as of 2011, Along with the urban areas, including the cities of Navi Mumbai, Thane, Bhiwandi, Kalyan. it is one of the most populous urban regions in the world. </p> <p> Mumbai lies on the west coast of India and has a deep natural harbour, In 2009. Mumbai was named an alpha world city, It is also the wealthiest city in India, and has the highest GDP of any city in South. West or Central Asia, </p> </div> <div id="content4"> <p> Tokyo, officially Tokyo Metropolis. is one of the 47 prefectures of Japan, Tokyo is the capital of Japan, the center of the Greater Tokyo Area. and the most populous metropolitan area in the world, It is the seat of the Japanese government and the Imperial Palace. and the home of the Japanese Imperial Family. </p> <p> Tokyo is in the Kantō region on the southeastern side of the main island Honshu and includes the Izu Islands and Ogasawara Islands. Tokyo Metropolis was formed in 1943 from the merger of the former Tokyo Prefecture and the city of Tokyo. </p> </div> </div> </div> <div id="grid"></div> </div><!-- END OF DIV #CONTENT--> </div><!-- END OF DIV #CENTER --> </div><!-- END OF DIV #WRAPPER -->
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何将这些div彼此堆叠？ - How do I stack these divs on top of each other?
如何在div框内彼此堆叠div？ - How do I stack divs on top of each other in a form box?
如何将Divs叠加在一起 - How to Stack Divs on top of each other
如何使DIV垂直对齐顶部？ - How do I get my DIVs to vertically align to the top?
在移动设备上，如何垂直堆叠引导导航标签？ - On mobile, how do I stack my bootstrap nav tabs vertically?
Divs 相互堆叠 - Divs stack on top of each other
如何使这些div垂直堆叠？ - How do I get these divs to stack vertically?
如何在页面中心将这些div堆叠在一起？ - How do I get these divs stack on top of each other right in the center of the page?
如何将两个水平div堆叠在一起以便移动？ - How do I get two horizontal divs to stack on top of each other for mobile?
程序生成的div相互堆叠。 如何垂直对齐它们？ - Procedurally generated divs are stacking one on top of each other. How can I vertically align them?
相关标签