html - 尽管有我的 CSS 规则，但 Div 自行调整大小

Question

我有一些看起来像这样的 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 都会调整自身大小/重新对齐到完全错误的位置。

我将其设置为向右浮动，宽 40 像素，高 110 像素，但目前它将自己置于 img div 下方而不是右侧，并将 imgwrap div 的尺寸更改为 217 宽和 11px 高, (只是覆盖文本...)。

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

Answer 1

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

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

您的代码在正常浏览器的控制台中执行时会出现大量错误，请务必在遇到意外问题时进行检查。每当 CSS 出现异常时:右键单击，Inspect Element，然后查看浏览器如何解析您的代码。