Question

我有这段代码：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TheGelu - Coming Soon</title>
<style type="text/css">
body {
  background: #474747 url(http://line25.com/wp-content/uploads/2009/letterpress/demo/bg.png);
}
p.margin {  
  margin-left:300px;
}
p.box { 
  margin-left:300px;
}
h1 {
  font: 60px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;  
  color: #999; text-shadow: 0px 3px 8px #2a2a2a;
}
boxy {
  border: 0px solid #db9b20;
  text-align: center;
  background-color: #f0f0f0;
  padding: 0px 0px 0px 0px;
  margin: 4px 0px 4px 0px;
  moz-box-shadow: 5px 5px 5px #000;
  -moz-border-shadow: 0pc;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow:0px 0px 0px 3px rgba(240, 240, 240, 1);
  -webkit-box-shadow:0px 0px 0px 3px rgba(240, 240, 240, 1);
  box-shadow:0px 0px 0px 3px rgba(240, 240, 240, 1);
}
</style>
</head>
<body><h1><center>TheGelu *-*</center></h1>
<p class="margin"><img src="RoundRound.png" alt="" width="136" height="137" /><img src="arrowSignal.png" alt="" width="318" height="126" /></p><div style="width:400px;height:300px;float:right;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background-color:#FFFFFF;-webkit-box-shadow: #000000 2px 2px 2px;-moz-box-shadow: #000000 2px 2px 2px; box-shadow: #000000 2px 2px 2px;">Pretty Text Here!</div>
</body>
</body>
</html>

我希望盒子正好在箭头旁边（右边）。我怎样才能做到这一点？我试过漂浮，但我不知道该怎么说。

http://thegelu.bl.ee/test.html

的实时版本

Answer 1

您可以移动div中的p.margin并在其上指定style="display: inline-block"。

Answer 2

这是你想要的吗？ enter image description here 1. p.margin，add float：left; 2.文本框div，还添加float：left; 完成。

编辑：你的意思是这样的吗？ enter image description here 因为您的箭头使用图像，并且该图像具有比图像本身更宽的透明背景。解决方案： 1.修改图像并删除空白区域 2.无需修改图片，只需添加margin-left：-90px;到你的文本框div

Div旁边的图像

2 个答案: