html - 力元素向上移动

标签 html css

我有一个渲染较低的盒子,我不知道为什么。

enter image description here

<div id="hint-history" class="popup">
<div class="row">
    <div class="col" id="closehistorypopup">

        <div class="body">

            <button class="x">
                <span class="sprite close"></span>
            </button>

            <div class="title">Hint History</div>

            <div class="lists">
                <?php for($i=0;$i<6;$i++) { ?>
                    <div class="list history[[$i]]" id="history[[$i]]">  
                        <div class="info">
                            <div class="picture monophoto">
                                <div class="text">BO</div>
                                <div class="img" style="background-image: url();"></div>
                            </div>
                            <div class="right">
                                <div class="lineone">John Smith</div>
                                <div class="linetwo">Daily Essentials</div>
                            </div>
                        </div>
                        <div class="boxes">
                            <div class="left">
                                <div class="box box1"></div>
                            </div>
                            <div class="right">
                                <div class="box box2"></div>
                                <div class="box box3"></div>
                            </div>
                        </div>
                        <a class="cbutton whiteonblack">VIEW LIST<!--SEE <span class="owner">JOHN'S</span>--></a>
                    </div>
                <?php } ?>
                <?php $i++; $privateCount = 1; ?>
                @if ($privateCount > 0)
                    <div id="privatecard" class="list history[[$i]]">  
                        <div class="info">
                            <div class="picture monophoto" style="visibility: hidden;">
                            </div>
                            <div class="right">
                                <p id="privatecounter">                        
                                    @if ($privateCount == 1)
                                        There is [[$privateCount]] private user.
                                    @else
                                        There are [[$privateCount]] private users.
                                    @endif
                                </p>
                                <div class="linetwo">&nbsp;</div>
                                <div class="linetwo">&nbsp;</div>
                                <div class="linetwo">&nbsp;</div>
                            </div>
                        </div>
                        <div class="boxes">
                            <div class="left">
                            </div>
                            <div class="right">
                            </div>
                        </div>
                    </div>
                @endif
            </div>

无论我做什么,它都不会让步。

.privatecard {
     margin-top: -500px !important;
}
.privatecard {
     padding-bottom: 500px !important;
}

//etc

我怎样才能强制它向上移动?

最佳答案

发布 fiddle ?

虽然我过去遇到过这个问题,但我已经通过确保所有 inline-block 的组合解决了它。元素也是vertical-align:top; (或任何其他状态,只要它是一致的)。然后,设置 min-height到父容器,和一个 min-height所有 inline-block 'd 元素

关于html - 力元素向上移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34909231/

相关文章:

javascript - 如何在 JavaScript 中重新加载页面以显示新列表

php - 使用php从数据库中填充html页面上的下拉菜单

html - flex 内的内联元素

html - CSS 字体大小(响应),相对于设备分辨率?

javascript - textarea resize 在 IE 中不起作用,我想在 IE 中调整大小,它在 chrome 中工作

html - 使用 :target selector 关闭带有纯 css 的容器

javascript - 如何制作粘性顶部导航栏

javascript - 使用 javascript 创建 html 表格

html - CSS。如何排除标签执行某些操作?

jquery - 使用 jQuery 修复一个 div,但它在流出时会调整大小