Question

你好再次哈洛。

我还在网页上工作，我可以使用一些html / style的帮助。

事情是我需要在图像下面放置一些文字。该文本需要超过1行，因为它有点长。

如果你能告诉我在哪里实施一些建议的代码，而不是仅仅说出我应该实施的内容，我会更喜欢

索引文件（DropDown.html）：

＆＃13;

<html>
<body><img src="nnh-logo.gif" alt="nnh-logo" height="70" width="298"></body>
<head>
  <title>Nielsen & Nielsen Holding</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</div>			
   <ul class="dropdown">
   	<li>
	<a href="#">Firmaer</a>
	<ul>
                <li><a href="http://nielsen-nielsen.dk/">Nielsen & Nielsen</a></li>
		<li><a href="http://www.micro-matic.com/">Micro Matic A/S</a></li>
		<li><a href="http://www.senmatic.dk/">Senmatic A/S</a></li>
		<li><a href="http://www.nassau.dk/">Nassau A/S</a></li>
		<li><a href="http://www.triax.dk/">Triax A/S</a></li>
		<li><a href="http://www.triaxsystems.dk/">Triax Systems A/S</a></li>
		</li>
	</ul>
	<li><a href="http://www.micro-matic.dk/Jobs/job.htm">Jobs</a></li>
	<li>
  <a href="http://www.micro-matic.dk/holding/images/Holding%20Profil%20Brochure.pdf">
       Group profile</a>
   	</ul>
   </li>
   </ul>
   	</li>
   	</ul>
   </div>
 </body>
<body>
<img src="trappe.jpg" style="position: absolute; top: 150px; 
           left: 1px; align="left" width="300" height="300">
</body>
</html>

＆＃13;

样式文件（Style.css：

＆＃13;

/* CSS Tweaks */
* {padding:0;margin:0;}
a img {border:0; z-index: -99; }
.clear {clear:both;}

body {font-family:Arial;font-size:12px;padding:10spx;}

.info {padding:10px;background:#f1f1f1;border:1px dotted #ccc;margin-bottom:10px;}
.info strong {display:block;}

.dropdown {list-style:none;}
.dropdown li {list-style:none;position:relative; z-index: 99;}
.dropdown li a {display:block;padding:0 10px;text-decoration:none;font-weight:bold;height:30px;line-height:30px;}

.dropdown > li {float:left;}
.dropdown > li > a {float:left;background:#333;color:#fff;border-left:1px solid #ccc;}
.dropdown > li > a:hover,.dropdown > li:hover > a {background:#666;}

.dropdown > li ul {display:none;}

.dropdown > li:hover > ul {display:block;width:211px;position:absolute;left:0;top:25px;}
.dropdown > li > ul > li > a {display:block;background:#444;color:#ccc;}
.dropdown > li > ul > li > a:hover,.dropdown > li ul > li:hover > a {background:#666;color:#fff;}

.dropdown > li ul > li:hover > ul {display:block;width:200px;position:absolute;left:200px;top:0; z-index: 9999;}
.dropdown > li > ul > li > ul > li a {display:block;background:#555;color:#ccc;}
.dropdown > li > ul > li > ul > li a:hover {background:#444;color:#fff;}

＆＃13;

Answer 1

用于旁边对齐使用以下属性：

make the image float: left; and the text float: right;

看看这个FIDDLE我在网上使用了一张图片，但你可以换掉它来拍照。

Answer 2

图像位置不能是绝对的，以达到你想要的效果。

编辑：

此

<body>
<img src="trappe.jpg" style="position: absolute; top: 150px; 
       left: 1px; align="left" width="300" height="300">
</body>

应该是这个

<img src="trappe.jpg" style="position: relative; top: 150px; 
       left: 1px; align="left" width="300" height="300">

然后这个

<body>
</div>
   <ul class="dropdown">

像这样

<body>
<div>
<img src="trappe.jpg" style="position: relative; top: 150px; 
       left: 1px; align="left" width="300" height="300">
   <ul class="dropdown">

和最后

.dropdown {list-style:none;}

应该像这样改变

.dropdown {list-style:none; display:inline-block;}

这应该为你提供美化这一切的起点。

Answer 3

添加第一个为什么你有2个身体标签？!!!在修复之后你应该使用相对于z-index的位置：1对于图像标签和你想要的另一个标签img使用具有更高z-index的绝对位置：2并且不要忘记使用顶部，底部，左侧或右侧位置。 ..

对齐图片下方和旁边的文字

3 个答案: