Question

http://i.stack.imgur.com/XZI9d.png

上面的图片，我试图让文本嵌入菜单栏的左侧和标题下方。我已尝试过保证金和填充，但没有运气。这些按钮都在与文本分开的标签内。代码如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
body
{
    background-image: url(Background.gif);
    repeat: no-repeat;
    background-repeat: no-repeat;
}

div.button
{
width: 220px;
padding:0px, 0px, 0px, 30px;
border:0px;
margin:0px;
}

div.textbox
{

    border: 0 px;
    margin-top: 300 px;
    margin-left: 300 px;
    background-color: white;
    opactiy: 0.5;
    width: 600 px;



}

span
{
    width: 600 px;
    padding: 90 px, 0 px, 0 px, 250px;
    font-family: "Letter Gothic Std Bold";
    font-size: 16 pt;
    color: #99CCFF;
    top: 300px;
    left: 300px;
}
</style>
</head>


<body>

<div class = "textbox"><span>
 text text text
</span></div>

<div class = "button">
<br>
<br>
<br>
<br>
<img src="DarkLayout_03.gif" width="166" height="66" />
<br>
<br>
<br>
<img src="DarkLayout_06.gif" width="166" height="66" />
<br>
<br>
<br>
<a href="mailto:swy5105@psu.edu"><img src="DarkLayout_08.gif" width="166" height="66" /></a>
<br>
<br>
<br>
<a href = "http://notafilmnoirheroine.tumblr.com"><img src="DarkLayout_11.gif" width="166" height="66" />
<br>
<br>
<br>
<a href = "http://swy5105.tumblr.com"> <img src="DarkLayout_13.gif" width="166" height="66" /></a>
</div>



</body>
</html>

Answer 1

尝试使用左边的浮动然后在那之后清除。

Answer 2

尝试这样的事情

小提琴：http://jsfiddle.net/pWurk/

你必须使用float: left

我希望它会帮助你

无法正确定位div

2 个答案: