HTML / CSS定位幫助
[英]Html/css positioning help
問題描述
如何在將“技能”文本保留在灰色下方的同時，將黃色與紅色並排對齊？
我試過的方法：使用float：left加上紅色，但這也會提高技能文本。 我嘗試使用相對和絕對，但它們使我感到困惑。
HTML：關鍵div ID： profiletable （灰色）， profileleft （紅色）， profileright （黃色）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Starbuzz Coffee</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="allcontent">
<div id="header">
</div>
<div id="main">
<h1>Jonny</h1>
<div id="profiletable">
<div id="profileleft"><?php echo $gravatar ?></div>
<div id="profileright">
<strong>Name:</strong> <?php echo $member->getFirstName() . ' ' . $member->getLastName(); ?><br />
<strong>Name:</strong> <?php echo $member->getFirstName() ?><br />
</div>
</div>
<h1>Skills</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
</div>
<div id="sidebar">
<p class="beanheading">
sidebar
</p>
</div>
<div id="footer">
© 2005, Jonny
</div>
</div>
</body>
</html>
CSS：密鑰ID位於最底部
body {
background-color: #eeeeee;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
margin: 0px;
}
#header {
background-color: #675c47;
margin: 10px;
height: 108px;
}
#main {
background: #ffffff;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 0px;
width: 510px;
float: left;
}
#sidebar {
background: #7DCFE7;
font-size: 105%;
padding: 15px;
margin: 0px 0px 10px 540px;
}
#footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%;
clear: left;
}
h1 {
font-size: 120%;
color: #954b4b;
}
.slogan { color: #954b4b; }
.beanheading {
text-align: center;
line-height: 1.8em;
}
a:link {
color: #b76666;
text-decoration: none;
border-bottom: thin dotted #b76666;
}
a:visited {
color: #675c47;
text-decoration: none;
border-bottom: thin dotted #675c47;
}
#allcontent {
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47;
margin-left: auto;
margin-right: auto;
}
#profiletable{
width: 510px;
background: #eee;
}
#profileleft {
background: red;
font-size: 105%;
padding: 0px 10px 10px 0px;
margin: 0px 10px 10px 0px;
width: 128px;
}
#profileright {
background: yellow;
font-size: 105%;
padding: 0px 10px 10px 0px;
margin: 0px 0px 10px 128px;
width: 200px;
}
4 個解決方案
解決方案1
3 已采納 2010-11-08 20:58:06
- 將
#profileright上的margin:0px 0px 10px 10px;更改為margin:0px 0px 10px 10px;[您修改元素左側空白的最后一個值] - 添加
float:left;在#profileleft和#profileright - 在您的CSS中添加以下
.clear {clear:both}; - 在
#profileright之后，添加<div class="clear"></div>
實時示例[已修復-我將透明div放置在錯誤的位置]： http : //jsbin.com/afonu3/2
解決方案2
1 2010-11-08 20:44:33
首先，如果您使用固定寬度，則始終可以使用top和left定位。
但是要使布局更流暢，
-
profileleft為float: left， -
profileright為float: left; clear: rightfloat: left; clear: right
然后您的技能將落在這些技能之下（您甚至可以添加一個float: left ）。
您可能需要在個人資料權限和技能下添加一個小的結束元素（ clear: both的<br /> clear: both應該做）
解決方案3
1 2010-11-08 20:46:02
在CSS中將紅色和黃色div設置為具有以下內容：
float: left;
display: inline-block;
創造新風格
.clear {
clear: both;
}
在任何塊元素中，我都使用div，在黃色塊之后和Skills標頭之前使用class ='clear'。
解決方案4
1 2010-11-08 20:46:42
添加一個
float:right;
到#profileright
然后在此處使用<br clear="all">清除它：
<strong>Name:</strong>
<?php echo $member->getFirstName() ?>
<br />
</div>
<br clear="all" />
</div>
HTML + CSS縮略圖幫助-僅定位縮略圖
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.