css - 为什么我的元素只适用于向右浮动(而不是向左浮动)-6ren

css - 为什么我的元素只适用于向右浮动(而不是向左浮动)

转载作者：行者123 更新时间：2023-11-28 13:29:58

如果我将 firstGroup 设置为 float: right，我会得到两列，第一组按预期在右边。但是，如果我将它设置为 float: left，我只会让以下元素卡在第一个元素的底部!

注意:我需要一直支持 IE7，所以没有 column-count。

这是我的页面的一个大大简化的版本(我只留下了相关的 block 元素并且只给出了一些示例元素):

<!DOCTYPE html>
<html>
<head>
    <title>Take</title>
    <style type="text/css">
        .group
        {
            margin-bottom: 20px;
            width: 50%;
            min-width: 530px;
        }

        .group > .group
        {
            margin-bottom: 0px;
        }

        .group > .label
        {
            display: block;
            width: 510px;
            padding: 5px;
            border: 1px solid black;
        }

        .firstGroup
        {
            float: left;
        }

        .item
        {
            display: block;
            width: 510px;
            padding: 5px;
            border: 1px solid black;
        }

        .item .label
        {
            display: block;
            float: left;
            width: 200px;
            height: 20px;
        }

        .header textarea
        {
            display: block;
        }

        .header
        {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="main">
            <h2>Title</h2>
            <form>
                <div class="header">
                    Notes :
                    <textarea name="Notes"></textarea>
                </div>
                <div class="group firstGroup">
                    <span class="label" style="background-color: #005588; color: white;">List 1</span>
                    <div class="group">
                        <span class="label" style="background-color: #999999; color: #000000;">Sub List 1</span>

                        <span class="item" style="background-color: #339933; color: #000000;">
                            <span class="label">Item 1</span>
                            <span class="options">
                                <span class="option"><input name="item[0].itemResultID" type="radio" value="0" checked="checked" />N/A</span>
                                <span class="option"><input name="item[0].itemResultID" type="radio" value="1" />Yes</span>
                                <span class="option"><input name="item[0].itemResultID" type="radio" value="2" />No</span>
                            </span>
                            <span class="notes"><input type="text" name="item[0].TestNotes" value="" /></span>
                        </span>

                        <span class="item" style="background-color: #339933; color: #000000;">
                            <span class="label">Item 2</span>
                            <span class="options">
                                <span class="option"><input name="item[1].itemResultID" type="radio" value="0" checked="checked" />N/A</span>
                                <span class="option"><input name="item[1].itemResultID" type="radio" value="1" />Yes</span>
                                <span class="option"><input name="item[1].itemResultID" type="radio" value="2" />No</span>
                            </span>
                            <span class="notes"><input type="text" name="item[1].TestNotes" value="" /></span>
                        </span>

                        <span class="item" style="background-color: #339933; color: #000000;">
                            <span class="label">Item 3</span>
                            <span class="options">
                                <span class="option"><input name="item[2].itemResultID" type="radio" value="0" checked="checked" />N/A</span>
                                <span class="option"><input name="item[2].itemResultID" type="radio" value="1" />Yes</span>
                                <span class="option"><input name="item[2].itemResultID" type="radio" value="2" />No</span>
                            </span>
                            <span class="notes"><input type="text" name="item[2].TestNotes" value="" /></span>
                        </span>
                    </div>
                    <div class="group">
                        <span class="label" style="background-color: #999999; color: #000000;">Sub List 2</span>

                        <span class="item" style="background-color: yellow; color: #000000;">
                            <span class="label">Item 1</span>
                            <span class="options">
                                <span class="option"><input name="item[3].itemResultID" type="radio" value="0" checked="checked" />N/A</span>
                                <span class="option"><input name="item[3].itemResultID" type="radio" value="1" />Yes</span>
                                <span class="option"><input name="item[3].itemResultID" type="radio" value="2" />No</span>
                            </span>
                            <span class="notes"><input type="text" name="item[3].TestNotes" value="" /></span>
                        </span>
                    </div>
                </div>
                <div class="group">
                    <span class="label" style="background-color: red; color: white;">List 2</span>

                    <span class="item" style="background-color: #339933; color: #000000;">
                        <span class="label">Item 1</span>
                        <span class="options">
                            <span class="option"><input name="item[4].itemResultID" type="radio" value="0" checked="checked" />N/A</span>
                            <span class="option"><input name="item[4].itemResultID" type="radio" value="1" />Yes</span>
                            <span class="option"><input name="item[4].itemResultID" type="radio" value="2" />No</span>
                        </span>
                        <span class="notes"><input type="text" name="item[4].TestNotes" value="" /></span>
                    </span>

                    <span class="item" style="background-color: #339933; color: #000000;">
                        <span class="label">Item 2</span>
                        <span class="options">
                            <span class="option"><input name="item[5].itemResultID" type="radio" value="0" checked="checked" />N/A</span>
                            <span class="option"><input name="item[5].itemResultID" type="radio" value="1" />Yes</span>
                            <span class="option"><input name="item[5].itemResultID" type="radio" value="2" />No</span>
                        </span>
                        <span class="notes"><input type="text" name="item[5].TestNotes" value="" /></span>
                    </span>
                </div>
                <input type="submit" value="Submit" />
            </form>
        </div>
    </div>
</body>
</html>

我在 FF 8 和 IE 9 中测试过，两者的行为相同。

最佳答案

你应该 float .group 而不仅仅是 .firstGroup

关于css - 为什么我的元素只适用于向右浮动(而不是向左浮动)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13681851/

文章推荐： javascript - 如何逻辑划分TD cell

文章推荐： JavaScript - NaN

文章推荐： javascript - 更改链接 jquery 的 href

文章推荐： javascript - 使用头像设置单个 Twitter 提要的样式

Vim:向左/向右移动窗口？
在 Vim 中，是否可以将窗口“移动”到左侧或右侧？例如，类似于 r或 x ，但是左/右而不是上/下？例如，如果我有这个布局: +---+---+---+ | | +---+ | A +--
javascript - 向左/向右滑动查看网页
我有一系列枚举的网页，目前每个页面上都有一个向左和向右箭头图标，用于导航到该系列中的上一页/下一页。我的问题:实现向左/向右滑动手势以执行相同操作的最简单(!)方法是什么？ (没有其他手势 - 请不
css - 向左/向右浮动会在调整窗口大小时产生间隙
在我的网站上，我有三个 div、一个标题、一个主要内容和右侧的侧边栏。侧边栏是实际问题。我希望侧边栏始终位于浏览器窗口的右侧，如果用户调整窗口大小使宽度低于主栏和侧边栏，则侧边栏会停在主要内容的左边缘
javascript - 向左/向右滚动到照片卷轴中的选定图像
请访问http://lindseymotors.com/v然后单击银色卡车顶部的照片。当展开的 View 弹出时，主照片下方有一排照片。当您点击它们时，它会切换到该照片并在您选择的图像上方显示“正在查
javascript - 向左/向右滚动带有动画的图像
请看一下这个 DEMO 。使用 this post 中的代码我已成功通过单击左侧或右侧链接使图像水平移动。我想要实现的是以某种方式使图像跳跃更平滑。这是我的代码: var scroll
jQuery 向左 move
我正在尝试向子菜单添加一个不错的小效果，但我不能使用 marginLeft，因为它会弄乱容器。所以我试图通过使用 left 而不是 marginLeft 来实现它，但我无法让它工作......任何想法
java - 向左/向右滑动事件
我有一个日历，我想让左右滑动和切换月份成为可能。是否有任何听众向左/向右滑动？谢谢! 最佳答案您可以像下面的示例一样使用 SimpleOnGestureListener:(显然，将 toast
javascript - 向左/向右滑动用户媒体卡以显示下一个
我正在尝试实现一个ng-repeats 水平用户媒体对象的小部件，我应该能够向左/向右滑动以显示下一张媒体卡。小部件应该看起来像这样如图所示下一张卡片头像是半可见的，暗示还有更多卡片可以刷。这就
java - 向左/向右滚动到新页面
我正在创建一个显示多个“页面”内容的应用程序。通常，这代表基于桌面的应用程序上的选项卡。在 android 上，我希望能够在屏幕上的任意位置使用手指在信息选项卡之间轻拂。这些选项卡的内容将只是 XM
iphone - 向左/向右滑动 UIViewcontroller
我正在使用: ViewController = [[ViewControllerClass alloc] initWithNibName:@"ViewControllerClass" bundle:[
javascript - 向左/向右滑动div onclick
这个问题已经存在: How to make this into a sliding left/right div 已关闭10 年前。下面提供的是我的 html 和 css 代码的片段，我不仅需要在
javascript - 向左/右/下不同方向滑动元素
尝试将 h3 向左滑动，p 向右滑动，.info 从下到上滑动 slider .实际上它在没有 jQuery 的 Chrome 和 Opera 中工作得很好，因为我使用了 Animate.css，但它
CSS，向左/向右切换以转换/翻译以获得更好的性能
我发现这个很好的进度条 CSS 动画。但我想transform: translate而不是left/right。如何切换到 transform 它？我试过了，但它不起作用: https://cod
html - 在移动设备上的表格中显示文本+向左/向右内容的显示问题
我想用 bootstrap 创建一个表，并在列中插入一些左拉和右拉的内容: http://jsfiddle.net/Zoker/sgdfgkvL/ Some content Some
css - 强制 div 向左
我怎样才能得到重叠并停在 Logo 的左边缘？当屏幕宽度扩展时，我试图让绿色条向左扩展，但我希望它停在 Logo 的左边缘。我试过了 position: absolute;在 #green_bar
Android - 向左|向右滑动。手势检测
试图将这个“手势”功能添加到我的第一个程序中，几乎我所做的每一次搜索都来到了这个线程: Fling gesture detection on grid layout 我能够让它工作..但就我而言，我不
android - 向左/向右滑动的 Recyclerview
我有带 tablayout 的 viewpager，在 ViewPager 内部我有一个正在创建 RecyclerView 的 fragment ，在 RecyclerVIew roe 项目中，我创
jquery - 如何将触摸事件[向左/向右滑动]添加到图片库
我一直在研究图片库 [html5]，它在桌面版本中运行良好，我想为 Ipad/平板电脑设备添加基于触摸的事件。您能否建议如何使用 javascript/jquery 添加基于触摸的事件。谢谢，斯里
javascript - 使用javascript向上，向下，向左，向右移动框
所以我想通过将盒子相乘然后去掉下半部分来使盒子向各个方向移动。向上和向右有效，但向下和向左无效。单击 4 个按钮中的 1 个即可调用这些功能。基本的 CSS 和 HTML。我该如何解决这个问题？ va
android - 向左/向右滑动 RecyclerView 的部分行
我已经像这样创建了一个 RecyclerView ItemTouchHelper - public class MyItemTouchHelper extends android.support.v7

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 为什么我的元素只适用于向右浮动(而不是向左浮动)