0

我有一些看起来像这样的 HTML：

<div class="pointwrap">
  <div class="imgwrap">
   <img src="howtoplay1.jpg" height="101" width="177"/>
  </div>
  <div class="textwrap">
    Tap Anywhere in the Drop zone to release a ball.
  </div>
</div>

我的这段代码的 CSS 规则如下所示：

.pointwrap
{
border-style:solid;
border-width:2px;
border-color:#2E2E2E;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color:#848484;
margin:3px 7px 7px 7px;
width:290px;
height:170px;
}

.imgwrap
{
width:120;
margin:5px 5px 5px 5px;
float:left;
}

.textwrap
{

FONT-SIZE:9px;
margin:0px 6px 6px 6px;
float:right;
}

div.textwrap
{
width:40;
height:110;
float:right;
}

我的问题是，每次加载页面时，textwrap div 都会将自身调整大小/重新对齐到完全错误的位置。

我将它设置为向右浮动，40px 宽和 110px 高，但目前它把自己放在 img div 下而不是它的右边，以及将 imgwrap div 的尺寸更改为 217 宽和 11px 高，（只是覆盖文本...）。

如何将此文本保留在 img 的右侧，以及我在 css 规则中设置的高度/宽度参数内？

4

1 回答 1

1 
div.textwrap
{
  width:40px;
  height:110px;
  float:right;
}

为值添加维度。如果您只是指定width:40浏览器不知道您是指像素、百分比、鸡还是香肠，则会忽略该规则。

您的代码在执行时会在体面的浏览器的控制台中出现大量错误，请务必在遇到意外问题时进行检查。每当 CSS 发生奇怪的事情时：右键单击，检查元素，然后查看浏览器如何解析您的代码。

于 2013-05-02T16:55:45.193 回答