Question

我正在尝试在其父div和文本的右上角设置一个嵌套div，以包裹嵌套div。

我真的应该理解位置，浮动和显示是如何协同工作的。

这是我的样本：

CSS

.parentDiv {
    width:295px;
    border:1px solid black;
}
.parentDiv .childDiv1 {
    width:36px;
    border:1px solid black;
    float:left;
}
.parentDiv .childDiv2 {
    width:210px;
    border:1px solid black;
    float:left;
}
.parentDiv .childDiv3 {
    width:44px;
    right:0px;
    top:0px;
    border:1px solid gray;
    position:relative;
    float:right;
}

HTML

<div class="parentDiv">
    <div class="childDiv1">
        <img alt="adfasf" src="../img/image.gif">
    </div>
    <div class="childDiv2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        <div class="childDiv3"> <a href="#" title="safasf" id="adasf"><span>search here</span></a>

        </div>
    </div>
</div>

Live jsfiddle

Answer 1

将其移至.childDiv2

Demo here

CSS（无变化）：

.parentDiv {  width:295px;border:1px solid black; }
.parentDiv .childDiv1 { width:36px;border:1px solid black;float:left; }
.parentDiv .childDiv2 { width:210px;border:1px solid black;float:left; }
.parentDiv .childDiv3 { width:44px;right:0px;top:0px;border:1px solid gray; position:relative; float:right; }

HTML

        <div class="parentDiv">
            <div class="childDiv2">
            <div class="childDiv1">
                <img alt="adfasf" src="../img/image.gif">
            </div>
               Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                <div class="childDiv3">
                    <a href="#" title="safasf" id="adasf"><span>search here</span></a>
                </div>
            </div>                
        </div>

Answer 2

喜欢这样： jsFiddle 。使子div最初作为childDiv2的子项出现，并保持CSS原样。

Answer 3

这是一个简化版本：

<div class="childDiv2">
    <div class="childDiv3">
        <a href="#" title="safasf" id="adasf"><span>search here</span></a>
    </div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

CSS：

.childDiv2 { width:210px;border:1px solid black;}
.childDiv3 { width:44px;right:0px;top:0px;border:1px solid gray;float:right  }

Answer 4

Here's my jsFiddle solution

除了修复，我删除了不必要的CSS。

此问题的原因是解析顺序。 HTML从左到右，从上到下进行解析。如果在元素-B之后将元素-A声明为，则元素-A将自然地在元素-B之后解析。

正如其他人所指出的，所有需要做的就是移动文本段落，使其在childDiv3之后声明。这将允许childDiv3驻留在childDiv2的第一行并正常浮动。

此外，我向childDiv1添加了一个边距，并向parentDiv添加了一些填充，以便稍微分析一下。您可以随意删除或修改属性。我还在.clear的结束标记之前添加了一个parentDiv元素，以便它可以正确地环绕其浮动的子元素，就像您可能想要的那样。

如何让这个嵌套的div显示在右上角并围绕它进行文本环绕？

4 个答案: