Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

Answer 2

尝试在自定义CSS中使用一些Bootstrap。看看 Fiddle ，我有两个选项供您测试。

在“结果小提琴”窗口中，尝试调整左侧框架的大小以查看其工作原理。

使用Bootstrap cdn链接时，请确保将链接放在自定义CSS上方，以便您的css具有优先权。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" >    <div class="container col-xs-12 block">


<div class="block-first bg-info col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-9 col-xs-offset-1">
Roberts Roberts &amp; Patrirty Smith
</div> 

<div class="block-second bg-success col-lg-4 col-lg-push-1 col-md-4 col-md-offset-1 col-md-push-1 col-sm-4 col-sm-offset-1 col-sm-push-1 col-xs-9 col-xs-offset-1 col-xs-push-0">
THE EXAMPLE ON THE FLY
</div> 
</div> 

<div class="container col-xs-12 bg-primary space-around"><br></div>

<div class="container col-xs-12 block">    
<div class="block-first2 bg-primary col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-9 col-xs-offset-1">
Roberts Roberts &amp; Patrirty Smith
</div> 

<div class="block-second bg-danger col-lg-4 col-md-4 col-sm-4 col-xs-9 col-xs-offset-1">
THE EXAMPLE ON THE FLY
</div> 
</div>

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

2 个答案: