javascript - 检测两个 div 之间的空间并将内容分成另一行

Question

我正在制作一个自定义模板，其中我有两个 div 并且都有 title 。我想检测两个 div 之间是否还剩 15px，然后将两个 div 的内容分成另一行。这可能吗 ？我用 css 和 html 做了一个 fiddle

#content .title
{
display:inline-block;
float:left;
text-align:left;
}
#content .sub-title {
display:inline-block;
float:right;
text-align:right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content" class="full">
    <div class="full">
      <div class="title">
        <h2><a href="#">Roberts Roberts &amp; Patrirty Smith</a></h2>
      </div>
      <div class="sub-title"><h2>THE EXAMPLE ON THE FLY</h2></div>
    </div>
	</div>

Answer 1

如果您知道元素的大小，您可以使用 CSS 媒体查询来做到这一点:

*
{ 
    padding: 0;
    margin: 0;
}
#content .title
{
    display:inline-block;
    float:left;
    text-align:left;
    border: solid 1px;
    margin-right: 15px;
    width: 400px;
}
#content .sub-title
{
    display:inline-block;
    float:right;
    text-align:right;
    border: solid 1px;
    width: 400px;
}
@media (max-width: 815px)
{
    #content .sub-title
    {
        float: left;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content" class="full">
    <div class="full">
        <div class="title">
            <h2><a href="#">Roberts Roberts &amp; Patrirty Smith</a></h2>
        </div>
        <div class="sub-title"><h2>THE EXAMPLE ON THE FLY</h2></div>
    </div>
</div>