0

嗨，我遇到了 css 问题，因为当我调整窗口大小时，div 没有正确放置，如下所示

在此处输入图像描述

这是涉及 div 的 CSS

.similar_story_block_form {
    background-color: white;
    border: 1px solid #CCCCCC;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.8);
    font-size: 13px;
    left: 337px;
    position: absolute;
    top: 105px;
    width: 337px;
    z-index: 100;
}

html代码

<div id="search-box-form">
  <div style="display:block;" class="similar_story_block_form">
     <div class="head">
        <p>What interest you?</p>
        <a onclick="javascript:closeSearchBox(event);" id="close-element-form" href="#"></a></div>
<ul>
 <li>
   <a no-confirm="" class="pushstate">
    <div col-400="" class="fleft"><p>No such business</p></div></a></li>
    <div class="head"><p>Nothing is found from <span style="color:red;font-weight:italic;">"s"</span></p>
    </div>
</ul>
</div>
</div>

目前我使用 chrome 这给了我同样的问题。我在这里想念什么？感谢您的帮助

4

3 回答 3

2

把“位置：相对；” 或“#search-box-form”元素上的“位置：绝对”。这样，“.similar_story_block_form”位置将与父位置相对/绝对。而不是全局/身体位置。

于 2012-10-18T11:25:39.287 回答
1

具有类similar_story_block_form的div的父级search-box-form应该具有相对位置，而具有类的divsearch-box-form应该具有绝对位置，您需要更改search-box-formdiv的顶部和左侧值。确保您还添加left:0;top:0;到父 div 是search-box-form

于 2012-10-18T11:30:30.220 回答
0

您必须以% 而不是像素为单位提供左侧、顶部、宽度的样式值。

当您以像素为单位时，大小和位置将固定为标准浏览器大小，而不是调整大小的。

如果你给它%，那么它会根据它的父元素自动改变它的宽度和位置。

例如，

 .similar_story_block_form{ width:80%; }

将使“similar_story_block_form”的宽度为其父元素的 80%。如果父元素是body，它会自动改变它的宽度和浏览器窗口的宽度。

于 2012-10-18T11:19:09.220 回答