Question

我有这样的HTML代码：

<body style="text-align: center;">
<div style="background-color: #014156; text-align: center; width: 985px; margin:6px auto;">
<div style="background-color: #a6a6a6; width: 975px; background-image:url('shadow.gif'); background-repeat:repeat-x; background-position: center top; margin: 6px; overflow:hidden;">
<div style="float:left; width: 674px; text-align: center; color:#056c02; margin-left: 5px; margin-top: 10px; font-size: 20opx;" title="Product title"><span style="color: #d2ff00">"</span><span style="background-color: #d2ff00">[[Title]]</span><span style="color: #d2ff00">"</span><p style="text-align: left; font-size: 14px; margin-bottom: 5px;" title="Description">[[Description]]</p></div>
<div style="float:left; width: 301px; text-align: center; " title="General information (Image, stock, price)">[[Picture1]]<BR><SPAN style="FONT-SIZE: 9px; background-color: #FFFFFF;">Image is for illustrative purposes only. Please refer to product description.</SPAN></div>
</div>

结果如何：

enter image description here

在Grey backgrounded div中，我需要两个div对齐内联，结果如下： enter image description here

我应该改变什么，问题出在哪里？

P.S。我的样式在标签中描述，因为由于某些主机原因，我没有能力使用css。所以请不要再开始告诉我：）

Answer 1

您需要降低左侧div或右侧div的宽度。

例如，将第一个div降低到650px可以解决问题。

你的逻辑是正确的：674px + 301px确实等于975px，但你没有在这些值中考虑边距和填充以及边界。使“实际”宽度小于或等于975px

Answer 2

而不是float: left，请尝试display: inline-block，这应该有用。

Answer 3

您有一个p代码，该代码位于block旁边，内联span。根据您的要求，将inline或inline-block添加到p标记。另一种可能性是您可以将p更改为span。

Div漂浮，定位

3 个答案: