个人中心
gpt4 book ai didi

html - 用标题和表格安排CSS层的问题

转载 作者：太空宇宙 更新时间：2023-11-03 21:01:44 25 4
gpt4 key购买 nike

我在使用下面的 CSS 排列元素时遇到问题。

我遇到的一个更明显的问题是表格列标题的强文本是黑色的，与表格上方信息中的强文本不匹配。

我的主要问题是 Layer3 不会到达 Layer2 的底部。我希望它位于信息栏的下方，但是此时来自 layer3 的 h1 出现在 rightlayer 的图片旁边。

如何强制layer3停留在Layer2的底部？

与我目前的 le​​ftlayer、leftlayer2 和 rightlayer 方法相比，将信息组织到列中的更好方法是什么？

<html><head><title>Auctions</title>

<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
<div id="Layer0">
<div id="Layer2">
<h1>Org."EdHardy"Herren"Hoodie"Gelb"Gr."XL"</h1>
<div id="leftlayer" class="leftlayer">
<p><strong>Username: </strong>trend-mode-2008
</p>
<p><strong>Article Number: </strong>250405322811
</p>
<p><strong>Subtitle: </strong>Original Neu Kollekt
</p>
<p><strong>Auction Start: </strong>11.4.2009
16:46:29 </p>
<p><strong>Auction End: </strong>21.4.2009 16:46:29
</p>
<p><strong>Auction Type: </strong>Buy Now
</p>
<p><strong>Category: </strong>Jacken
</p>
</div>
<div class="leftlayer2">
<p><strong>Condition: </strong> New
</p>
<p><strong>Total Items: </strong> 6
</p>
<p><strong>Total Sales: </strong> 1
</p>
<p><strong>Start Price: &#8364;</strong> 0.00
</p>
<p><strong>Buyitnow Price: &#8364;</strong> 89.00
</p>
<p><strong>Bids: </strong> 1 </p>
<p><strong>Revised: </strong> No
</p>
</div>
<div class="leftlayer2">
<p><strong>Private: </strong> No
</p>
<p><strong>Finished: </strong> No
</p>
<p><strong>Cancelled: </strong> No
</p>
<p><strong>Paypal: </strong> No
</p>
<p><strong>Country: </strong> Germany
</p>
<p><strong>Location: </strong> Herne
</p>
<p><strong>Shipping to: </strong> Germany</p>
<form name="categoryForm">
<p><input name="radiobutton" value="fakeapproved" type="radio">Fake (Approved)</p>
<p><input name="radiobutton" value="fakesuspected" type="radio">Fake (Suspected)</p>
<p><input name="radiobutton" value="keyword" type="radio">Forbidden Keywords</p>
<p><input name="radiobutton" value="parallelimport" type="radio">Parallel Imports
<input name="Submit" value="Update" onclick="handleClick('250405322811', 'Hardy', '1', '250405325721', 'trend-mode-2008');return false" type="submit"></p>
</form>
</div>
<div id="rightlayer"><a href="#" onclick="makewindows(&amp;amp;quot;&lt;img src='..\/images\/250405322811.jpg' &gt;&amp;amp;quot;); return false;">
<img src="../images/250405322811.jpg" height="100" width="100"></a>
<p><a href="#" onclick="makewindows(&amp&lt;quot;); return false;">Click
for full description </a></p>
<p><a href="#" onclick="deleteRec('250405322811', 'Hardy', '1', '250405325721')">DELETE</a>
</p>
</div>
<div id="Layer3">
<h1>Hardy Auctions</h1>
<table border="0" width="85%">
<tbody>
<tr>
<td width="15%"><strong>Seller ID</strong></td>
<td width="10%"><strong>Start Date</strong></td>
<td width="65%"><strong>&gt;Description</strong></td>
<td width="10%"><strong>Category</strong></td>
</tr>
<tr id="article_250405322811">
<td><a href="#" onclick="updateByUser('trend-mode-2008','')">trend-mode-2008</a></td>
<td><a href="#" onclick="updateByPk('Layer2', '250405322811', 'Hardy', '1')">11
04 2009</a></td>
<td><a href="#" onclick="updateByPk('Layer2', '250405322811', 'Hardy', '1')">Org."EdHardy"Herren"Hoodie"Gelb"Gr."XL"</a></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id="tablefooter" class="tablefooter">
<div id="tablefooterleft" class="tablefooterleft"><a href="#" onclick="updateByPage('Layer3', 'Hardy', '1')">&lt;&lt;-First
</a><a href="#" onclick="updateByPage('Layer3', 'Hardy', '1')">&lt;-Previous</a>-----------------------------------------------------------------<a href="#" onclick="updateByPage('Layer3', 'Hardy', '2')">
Next -&gt; </a><a href="#" onclick="updateByPage('Layer3', 'Hardy', '7')"> Last
-&gt;&gt;</a></div>
</div>
</div>
</div>
</body></html>

和CSS:

#Layer0 {
  width: 100%;
  height: 100%;
}

body{
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;

}

#Layer2 {
background:#fff;
color:#000;
voice-family: "\"}\"";
voice-family: inherit;
padding:20px;

}

#Layer2 p {color:#888;}

#Layer2 a, a:link { color:#006633; text-decoration: none;}

#Layer2 a:hover, a:active{ color:#FF6666; text-decoration: none;}

html>body #Layer2 {
}

p,h1,pre {
margin:0px 10px 10px 10px;
font:Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 1.6em;
text-align:justify;
text-decoration:none;
}

h1 {
font-size:2.5em;
text-align: center;
color:#ccc;
padding-top:15px;

}

h3 {
font-size:14px;
color:#999;

}

.leftlayer {
  float: left;
  left: 20%;
  width: 20%;
  height: 100%;
  margin-right: 10%;
}
.leftlayer strong {
  text-align: left;
}
.leftlayer2 {
  float: left;
  width: 20%;
  height: 100%;
  margin-left: 2%;
}
#rightlayer {
  float: left;
}
#Layer3 {
  float: bottom;
}

最佳答案

规则 float :底部；无效。有three valid values为 float 。他们是左，右，没有。如果您希望该 div 结束，那么您应该通过更改 float:bottom; 将其设置为清除前一个 div 的 float ；清除:两者；或清除:左；

关于html - 用标题和表格安排CSS层的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/781970/

25 4 0
文章推荐： css - 使用 css 在文本 control.htmlText 中设置 标签和 标签的样式
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com