Question

所以我正在尝试制作一个网站，而我正试图将文本置于两张图片之间

<!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>
</head>

<body>

<div style=" margin-left:auto; margin-right:auto; text-align:center;">
<p>poo</p></div>

<div "float:left; margin-top:-33px;">>
<img     src="https://lh4.googleusercontent.com/-0kj0VRLro_o/AAAAAAAAAAI/AAAAAAAAAAA/8Aoyxk98YV0/s48-c-k/photo.jpg" width="297" height="241"/>

<div style="float:right; margin-top:-33px;">
<img src="http://i1.ytimg.com/vi/HdqsNykr9cM/mqdefault.jpg" height="187">
 </div>

抱歉奇怪的间距这是wat-tier foruming ing

Answer 1

您使用<span>这会阻止您<div> <br>

Answer 2

首先，你的html标记有一些问题：

它没有很好地形成，你错过了一个结束</div>标签
您的内嵌样式没有style属性，例如<div "float:left; margin-top:-33px;">应为<div style="float:left; margin-top:-33px;">
">>无效的HTML标记
尽量不要使用内联样式。相反，创建一个单独的样式表并使用css类。

我已经创建了一个DEMO，我已经清理了一些代码，并将文本置于两个图像之间。一般的想法是当您需要在页面上彼此相邻的元素时使用float: left。

Answer 3

关于你想做什么，你可以做两件事第一个是制作带有自动边距的父div，然后将文字和图片div放入其中，并为您的文字float:left和div提供img属性你的div标签是这样的:(如果您的父<div id="parent" style="margin: 0 auto 0"> <div style="float:left"><img src="https://lh4.googleusercontent.com/-0kj0VRLro_o/AAAAAAAAAAI/AAAAAAAAAAA/8Aoyxk98YV0/s48-c-k/photo.jpg" width="297" height="241</div> <div style="float:left;text-align:center"><p>poo</p></div> //this is your text div <div style="float:left"><img src="http://i1.ytimg.com/vi/HdqsNykr9cM/mqdefault.jpg" height="187"</div> </div>的方向是默认的从左到右）

div

使用此技术，您可以通过为div提供所需的边距来更正div之间的间距。

您可以做的另一件事是将所有div放在父display:relative中（就像我上面所示），但这次给父元素一个div属性然后根据需要给孩子div s（文字和图片position:absolute s）绝对位置（{{1}}）

（ps：我更喜欢我给你的第一个答案！）

为什么<div>表现得像一个？我应该使用其他东西吗？</div>

3 个答案: