根据响应式布局中前一个元素的宽度更新同级元素css

我的布局当前在320px分辨率下打破（.info下降为.icon并打破布局），我失去了如何防止它断开。根据响应式布局中前一个元素的宽度更新同级元素css

动态加载.num信息（数字），可能是0到2147483647之间的任何值。如果屏幕分辨率不足以在一行上显示.num和.unread，而不是中断，我想让.unread下拉到下一行（display：block应用于它？）。我试图想出一种只使用CSS的方法，但是如果存在超过2位数的数字，我可以使用js来应用类，但是如果分辨率更宽并且可以显示更多数字，则此方向看起来不正确。 E.G - 1000px可以显示更多的数字......我希望它在这种情况下保持在一行。

我的代码如下：

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" /> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    <style> 
     body{ 
     padding:20px; 
     } 
     .wrapper { 
     background-color:#cccccc; 
     border-radius:20px; 
     overflow:hidden; 
     border:2px solid black; 
     } 
     .icon { 
     font-size:40px; 
     padding:12px; 
     display:block; 
     } 
     .icon, .info { 
     float:left; 
     } 
     .info { 
     border-left:1px solid black; 
     padding-left: 15px; 
     } 
     .info h3 { 
     font-size:16px; 
     margin:10px 0 0; 
     } 
     .info p { 
     margin:10px 0; 
     } 
     .num { 
     font-weight:bold; 
     font-size:20px; 
     } 
     .unread { 
     white-space: nowrap; 
     } 
    </style> 
    </head> 

    <body> 
    <div class="wrapper"> 
      <div> 
       <div class="icon">X</div> 
       <div class="info"> 
        <h3>Header Information</h3> 
        <p> 
         <a class="num">23</a> 
         <span class="unread">Unchecked Voicemails to Date</span> 
        </p> 
       </div> 
      </div> 
     </div> 
    </body> 

</html>

http://plnkr.co/edit/18Mids4M3SupNwOT8ocP?p=preview

来源

2014-08-28 ThatDevGuy

我想通了。我需要为.info容器添加宽度，并将.info p display：inline-block内的元素。

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" /> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    <style> 
     body{ 
     padding:20px; 
     } 
     .wrapper { 
     background-color:#cccccc; 
     border-radius:20px; 
     overflow:hidden; 
     border:2px solid black; 
     } 
     .icon { 
     font-size:40px; 
     padding:12px; 
     } 
     .icon, .info { 
      float:left; 
     } 
     .info { 
     border-left:1px solid black; 
     padding-left:15px; 
     width:60%; 
     } 
     .info h3 { 
     font-size:16px; 
     margin:10px 0 0; 
     } 
     .info p { 
     margin:5px 0 15px; 
     } 
     .info span { 
     display:inline-block; 
     } 
     .num { 
     font-weight:bold; 
     font-size:20px; 
     } 
    </style> 
    </head> 

    <body> 
    <div class="wrapper"> 
      <div> 
       <div class="icon">X</div> 
       <div class="info"> 
        <h3>Header Information</h3> 
        <p> 
         <a class="num">2</a> 
         <span class="unread">Unopened Voicemails</span> 
        </p> 
       </div> 
      </div> 
     </div> 
    </body> 

</html>

http://plnkr.co/edit/NanIRaMcK9AJvpNEQG3Z?p=preview

来源

2014-08-28 14:49:56 ThatDevGuy

根据响应式布局中前一个元素的宽度更新同级元素css

回答

相关问题