javascript - 使用 JavaScript 获取 float div 之间的空间？

Question

我使用 bootstrap 得到了一个带有多个 float div 的布局。

我想使用 JavaScript 检索 div 之间的空格。我只是不知道我该怎么做。见下图。

A picture says a 1000 words ;)

我用上面的布局创建了一个 fiddle ，我将把它粘贴到这里，这样你就可以根据需要使用它。

.page-container {
    background: #ededed;
    padding: 40px 0;
}

.column {
    padding: 15px;
    background-color: white;
    box-shadow: 1px 1px 3px #ccc;
}

[class^="col-"] {
    margin-bottom: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="page-container">
<div class="container">
    <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="column">
            <h2>
        Floating element #1
        </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
        </p>
        <p>
        Curabitur quam sapien, lacinia sit amet sagittis sed, fringilla nec arcu. Morbi at velit facilisis, aliquet justo non, tincidunt mauris. Curabitur tempus ante sit amet auctor fringilla. Sed ut velit ac purus euismod placerat. Fusce ultrices feugiat tortor at condimentum. Ut eleifend eget velit at vulputate. In commodo ligula et urna ultrices, non ullamcorper est pharetra. Donec pharetra, purus a aliquam rutrum, lacus arcu porttitor nunc, eu maximus eros justo sed neque. Fusce a urna non enim lobortis venenatis. Suspendisse potenti.
        </p>
        </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="column">
            <h2>
        Floating element #2
        </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
        </p>
        </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
       <div class="column">
        <h2>
        Floating element #3
        </h2>
        <p>
            Curabitur quam sapien, lacinia sit amet sagittis sed, fringilla nec arcu. Morbi at velit facilisis, aliquet justo non, tincidunt mauris. Curabitur tempus ante sit amet auctor fringilla. Sed ut velit ac purus euismod placerat. Fusce ultrices feugiat tortor at condimentum. Ut eleifend eget velit at vulputate. In commodo ligula et urna ultrices, non ullamcorper est pharetra. Donec pharetra, purus a aliquam rutrum, lacus arcu porttitor nunc, eu maximus eros justo sed neque. Fusce a urna non enim lobortis venenatis. Suspendisse potenti.
        </p>
        <p>
        Fusce a velit et justo porttitor sollicitudin a a velit. Praesent ultrices arcu a sodales ultricies. Etiam cursus mattis dapibus. Fusce vulputate commodo pretium. Suspendisse a orci vitae ipsum interdum dapibus a quis velit. Proin euismod, lectus id euismod semper, tellus nunc luctus dui, consectetur venenatis erat mi eu dolor. Nunc eleifend semper lacus, at hendrerit massa. Praesent ac magna at lacus commodo faucibus eu sit amet magna. Donec pellentesque felis et leo interdum dignissim. Sed sit amet sapien ac quam auctor semper quis ut nibh. Vivamus consectetur, ipsum luctus semper viverra, sem arcu sagittis mauris, a interdum odio sapien in augue.
        </p>
        <p>
        Nam ut bibendum urna, sed congue neque. Nunc a nunc venenatis, porttitor odio vitae, finibus est. Suspendisse quis purus a diam aliquam ullamcorper eu sed dolor. Etiam ac eros eget nisl pretium lobortis. Nulla convallis id nunc eget efficitur. Morbi vel elementum justo. Phasellus et egestas quam. Cras eu tristique urna. Cras ac justo efficitur, consectetur eros et, tincidunt nulla. Quisque et cursus ipsum. Ut tincidunt, purus et tempor fermentum, nulla diam suscipit ex, non sodales eros nunc vel ante. Duis quis justo quam. Sed imperdiet lorem et blandit pretium. Etiam elit dui, tristique et vehicula vitae, venenatis et augue.
        </p>
       </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="column">
        <h2>
        Floating element #4
        </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
        </p>
        <p>
        Curabitur quam sapien, lacinia sit amet sagittis sed, fringilla nec arcu. Morbi at velit facilisis, aliquet justo non, tincidunt mauris. Curabitur tempus ante sit amet auctor fringilla. Sed ut velit ac purus euismod placerat. Fusce ultrices feugiat tortor at condimentum. Ut eleifend eget velit at vulputate. In commodo ligula et urna ultrices, non ullamcorper est pharetra. Donec pharetra, purus a aliquam rutrum, lacus arcu porttitor nunc, eu maximus eros justo sed neque. Fusce a urna non enim lobortis venenatis. Suspendisse potenti.
        </p>
        </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="column">
        <h2>
        Floating element #4
        </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
        </p>
        </div>
    </div>
</div>
</div>

我正在尝试获取这些像素，并使用 JavaScript 向上移动底层 div 。我知道我可以使用诸如砌体之类的东西。但我无法让这些在我的应用程序中工作。

有人知道我该怎么做吗？ (哦，使用 jQuery 没问题)

Answer 1

尝试以下之一:

var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;

clientHeight 包括高度和垂直内边距。

offsetHeight 包括高度、垂直内边距和垂直边框。

scrollHeight 包括所包含文档的高度(在滚动的情况下将大于高度)、垂直内边距和垂直边框。

使用 JQuery

$('#someDiv').height();
$('#someDiv').width();