Question

我的布局目前打破320px分辨率（.info下降.icon并打破布局），我失去了如何防止它破坏。

.num信息（数字）正在动态加载，可能是0到2147483647之间的任何内容。如果屏幕分辨率不够宽，无法在一行显示.num和.unread，而不是打破，我希望.unread下拉到下一行（显示：块应用于它？）。我试着想办法只使用css，然后虽然我可以使用js来应用类，如果超过2位数，但如果分辨率更宽并且可以显示更多数字，这个方向似乎仍然不正确。 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

Answer 1

我明白了。我需要在.info容器中添加一个宽度，并使.info p中的元素显示为：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

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

1 个答案: