檢測兩個div之間的空間並將內容分解到另一行

我正在製作一個自定義模板，其中我有兩個div，並且都有標題。我想要檢測兩個div之間是否剩餘15px，然後將內容分解爲另一個div用於其他行。這可能嗎？我已經做了小提琴與CSS和HTML檢測兩個div之間的空間並將內容分解到另一行

#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> 
 
\t </div>

來源

2015-05-09 user1001176

如果你知道元素的大小，你可以使用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>

來源

2015-05-09 23:21:25 mattfryercom

謝謝你的回答。問題是它的響應式設計。但它的不是全寬主容器是最大960px。 – user1001176

只要你知道事物的寬度，這應該不重要。你可以使用媒體查詢來減少元素的寬度和字體大小，因爲視口寬度被縮小了嗎？ – mattfryercom

是的，我可以。我正在嘗試這個。我恢復回來:) – user1001176

嘗試在自定義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>

來源

2015-05-10 01:41:02 AngularJR

檢測兩個div之間的空間並將內容分解到另一行

回答

相關問題