css - 如何在绝对定位的 div 下 float 一个 div(里面有 jsfiddle)-6ren

css - 如何在绝对定位的 div 下 float 一个 div(里面有 jsfiddle)

转载作者：行者123 更新时间：2023-11-28 12:51:37

/* structure */

body {
    margin:0;
    padding:0;
    }
#break {
    clear:both;
    }

/* header */

header {
    padding:15px;
    background:silver;
    }
#avatar {
    float:right;
    }
#brand {
    float:left;
    }

/* nav */

nav {
    clear:both;
    }
#menu1 ul {
    margin:0;
    padding:0;
    }
#menu1 ul li {
    list-style-type:none;
    float:left;
    margin:0 1px 0 0;
    width:150px;
    height:50px;
    background:orange;
    }
#menu2 {
    clear:both;
    float:left;
    margin:1px 0 0 0;
    }
#menu2 ul {
    margin:0;
    padding:0;
    }
#menu2 ul li {
    list-style-type:none;
    float:left;
    margin:0 1px 0 0;
    width:150px;
    height:50px;
    background:orange;
    }

/* main */

#commentswrapper {
    clear:both;
    }
#comments {
    clear:both;
    background:grey;
    }
#feature {
    position:absolute;
    top:0;
    left:0;
    width:600px;
    background:lime;
    }
#images {
    position:relative;
    margin:0 300px 0 600px;
    background:cyan;
    }
#recommend {
    position:absolute;
    top:0;
    right:0;
    width:300px;
    background:red;
    }
#main {
    position:relative;
    }
#mainwrapper {
    clear:both;
    position:relative;
    }
#title {
    clear:both;
    background:brown;
    }


@media screen and (max-width:1280px){

/* structure */

body {
    margin:0;
    padding:0;
    }
#break {
    clear:both;
    }

/* header */

header {
    padding:15px;
    background:silver;
    }
#avatar {
    float:right;
    }
#brand {
    float:left;
    }

/* nav */

nav {
    clear:both;
    }
#menu1 ul {
    margin:0;
    padding:0;
    }
#menu1 ul li {
    list-style-type:none;
    float:left;
    margin:0 1px 0 0;
    width:150px;
    height:50px;
    background:orange;
    }
#menu2 {
    clear:both;
    float:left;
    margin:1px 0 0 0;
    }
#menu2 ul {
    margin:0;
    padding:0;
    }
#menu2 ul li {
    list-style-type:none;
    float:left;
    margin:0 1px 0 0;
    width:150px;
    height:50px;
    background:orange;
    }

/* main */

#comments {
    clear:both;
    background:grey;
    }
#feature {
    position:absolute;
    top:0;
    left:0;
    width:600px;
    background:lime;
    }
#images {
    margin:0 0 0 600px;
    }
#recommend {
    clear:both;
    float:left;
    position:relative;
    margin:0;
    width:100%;
    background:red;
    }
#main {
    position:relative;
    }
#mainwrapper {
    clear:both;
    float:left;
    position:relative;
    }
#title {
    clear:both;
    background:brown;
    }
}

<body>
    <header>
        <div id="brand">logo</div>
        <div id="avatar">avatar</div>
        <div id="break"></div>
    </header>
    <nav>
        <div id="menu1">
            <ul>
                <a href=""><li>nav1</li></a>
                <a href=""><li>nav2</li></a>
                <a href=""><li>nav3</li></a>
                <a href=""><li>nav4</li></a>
            </ul>
        </div>
        <div id="menu2">
            <ul>
                <a href=""><li>nav1</li></a>
                <a href=""><li>nav2</li></a>
                <a href=""><li>nav3</li></a>
                <a href=""><li>nav4</li></a>
            </ul>
        </div>
    </nav>
    <div id="title">
        title
    </div>
    <div id="mainwrapper">
        <div id="main">
            <div id="feature">
                111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111
            </div>
            <div id="images">
                222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
            </div>
            <div id="recommend">
                333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333
            </div>
        </div>
    </div>
    <div id="commentswrapper">
        <div id="comments">
            comments
        </div>
    </div>
</body>

http://jsfiddle.net/B95BX/

#comments div，位于 3 个主要 div(#feature、#images、#recommend)下，当浏览器缩小到小于 1280px 时，它会完美地 float 。但是，展开后，#comments div 仅 float 在#images div 下，因为其他 2 个 div 是绝对定位的。我明白为什么要这样做，我只是不知道如何解决它。当浏览器大于 1280 像素时，我如何 float #comments div，同时在中间 div (#images) 可拉伸(stretch)时仍然保留所有 3 个 div 填充屏幕的特性？

最佳答案

抱歉，您不能在绝对定位的 div 下 float 任何内容。

绝对定位元素从文档流中移除，这意味着它们不再影响页面上其他元素的流。

如果您确切知道定位元素的高度，则可以通过相对定位或利用其 margin-top 样式将评论元素放置在其下方。

否则，您将不得不寻求 javascript 解决方案来计算绝对定位元素的高度，并使用它来将其他元素移动到所需位置。

关于css - 如何在绝对定位的 div 下 float 一个 div(里面有 jsfiddle)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16903514/

文章推荐： ios - .While Editing 期间消失的清除按钮

文章推荐： javascript - 如何格式化对象的对象

文章推荐： swift - 在闭环中捕捉值(value)

文章推荐： javascript - Record 和 {} 之间的区别？

css - float float float float ？
我知道问题的标题听起来很奇怪，但我不知道该怎么调用它。首先，我有一个网格布局，我希望我的 .search-wrapper 宽度为 50% 并向右浮动。在我的演示中 jsfiddle整个 .searc
c++ - "float = float - float"中是否存在隐式类型提升？
我们正在使用 QA-C 来实现 MISRA C++ 一致性，但是该工具会为这样的代码喷出错误: float a = foo(); float b = bar(); float c = a - b; 据
c - float* 类型的变量应该指向单个 float 还是一系列 float ？
考虑 float a[] = { 0.1, 0.2, 0.3}; 我很困惑a稍后传递给函数 foo(float* A) .不应该是 float* 类型的变量指向单个浮点数，对吗？就像这里提到的tu
c# - 存在从 'float' 和 'float' 以及从 'float' 到 'float' 的隐式转换
这可能是我一段时间以来收到的最好的错误消息，我很好奇出了什么问题。原代码 float currElbowAngle = LeftArm ? Elbow.transform.localRotation
types - 类型 'float -> float' 与类型 'float' 不匹配
刚开始学习 F#，我正在尝试为 e 生成和评估泰勒级数的前 10 项。我最初编写了这段代码来计算它: let fact n = function | 0 -> 1 | _ -> [1
floating-point - 如何从二进制文件中读取单精度 float 并转换为 Erlang float ？
我已经使用 Erlang 读取二进制文件中的 4 个字节(小端)。在尝试将二进制转换为浮点时，我一直遇到以下错误: ** exception error: bad argument in
c - 为什么将一个小 float 添加到一个大 float 中只会删除小 float ？
假设我有: float a = 3 // (gdb) p/f a = 3 float b = 299792458 // (gdb) p/f b = 29979244
css - Float right 不会在框内 float ，而是在框外 float
我每次都想在浏览器顶部修复这个框。但是右边有一些问题我不知道如何解决所以我寻求帮助。 #StickyBar #RightSideOfStickyBar { float : right ; }
c# - 为什么 (int)==(float) 总是编译为 (float)==(float)
我正在研究 C# 编译器并试图理解数学运算规则。我发现在两种不同的原始类型之间使用 == 运算符时会出现难以理解的行为。 int a = 1; float b = 1.0f; Cons
c - 为什么将小 float 添加到大 float 只会降低小 float ？
假设我有: float a = 3 // (gdb) p/f a = 3 float b = 299792458 // (gdb) p/f b = 29979244
floating-point - 从硬件架构的角度来看，为什么非规范化 float 比其他 float 慢得多？
Denormals众所周知，与正常情况相比，表现严重不佳，大约是 100 倍。这经常导致 unexpected软件 problems . 我很好奇，从 CPU 架构的角度来看，为什么非规范化必须是那
iphone - 在 float 和 float 之间获取随机 float 的最佳方法是什么？
我有一个由两个 float 组成的区间，并且需要生成 20 个随机数，看起来介于两个 float 定义的区间之间。比方说: float a = 12.49953f float b = 39.1123
c++ - 错误 : no matching function for call to ‘QGenericMatrix<4, 3, float>::QGenericMatrix(const float&, const float&, ..., float)’
我正在构建如下矩阵: QMatrix4x3 floatPos4x3 = QMatrix4x3( floatPos0.at(0), floatPos1.at(0), floatPos2.at(0),
floating-point - 标准化 float f之后(之前)的下一个标准化 float 是什么？
给定归一化的浮点数f，在f之前/之后的下一个归一化浮点数是多少。通过微动，提取尾数和指数，我得到了: next_normalized(double&){ if mantissa is n
CSS float : Why is float applied to the element just prior to the element to be floated?
关于 CSS“float”属性的某些东西一直让我感到困惑。为什么将“float”属性应用到您希望 float 的元素之前的元素？为了帮助可视化我的问题，我创建了以下 jsFiddle http://
CSS float : Why is float applied to the element just prior to the element to be floated?
关于 CSS“float”属性的某些东西一直让我感到困惑。为什么将“float”属性应用到您希望 float 的元素之前的元素？为了帮助可视化我的问题，我创建了以下 jsFiddle http://
css - 如何在 float 跨度内将 float 跨度包裹在另一个 float 跨度下方 [包括图表]？
我有一个新闻源/聊天框。每个条目包含两个跨度:#user 和#message。我希望#user 向左浮动，而#message 向左浮动。如果#message 导致行超过容器宽度，#message 应该
css-float - CSS float，清除一个 "row"的 float 元素
我想创建一个“记分卡”网格来输出一些数据。如果每个 div.item 中的数据都具有相同的高度，那么在每个 div.item 上留下一个简单的 float 会提供一个漂亮的均匀布局，它可以根据浏览器大
html - CSS float 属性 - float div 与 float 段落时的行为差异
我正在学习使用 CSS float 属性。我想了解此属性的特定效果。考虑以下简单的 HTML 元素: div1 div2 This is a paragraph 以及以下 CSS 规则: div {
用于 float 或整数的 Python 正则表达式，但不将 float 拆分为两个 float
我正在尝试从可以是 int 或 float 的文件中提取数据。我发现这个正则表达式将从文件 (\d+(\.\d+)?) 中提取这两种类型，但我遇到的问题是它将 float 拆分为两个。 >>> imp

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 如何在绝对定位的 div 下 float 一个 div(里面有 jsfiddle)