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都会调整大小/重新调整自己的位置。

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

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

Answer 1

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

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

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

尽管我有css规则，Div还是会调整自己的大小

1 个答案: