代码之家  ›  专栏  ›  技术社区  ›  ADH - THE TECHIE GUY

是否有可能以像素为单位设置一个部分的宽度,以百分比为单位设置其余部分的宽度而不丢失其响应性?

  •  0
  • ADH - THE TECHIE GUY  · 技术社区  · 8 年前

    aside {
        background-color: blue;
        width: 220;
        list-style: none;
        height: 100%;
        float:left;
    }
    
    article {
        background-color: red;
        width:60%;
        height:100%;
        float: left;
    }
            <aside>
                <ul>
                    <li><a>1st item</a></li>
                    <li><a>2nd item</a></li>
                    <li><a>3rd item</a></li>
                    <li><a>4th item</a></li>
                </ul>
            </aside>
                
            <article>
              <p>contents here</p>
            </article>

    在上面的代码中,我尝试创建菜单部分和内容部分 菜单部分的特点是,即使窗口大小调整,其宽度也保持不变。但是内容部分需要根据窗口大小调整来调整大小。但是这里,上面给出的设计不是响应性设计。有没有可能设计这样一个菜单和内容部分而不失去它的响应能力?

    3 回复  |  直到 8 年前
        1
  •  1
  •   Mohammad Usman    8 年前

    去除 width float 属性来自 article 并加上 overflow: hidden

    aside {
      background-color: blue;
      width: 150px;
      float:left;
    }
    
    aside ul {
      list-style: none;
    }
    
    article {
      background-color: red;
      overflow: hidden;
    }
    <aside>
      <ul>
        <li><a>1st item</a></li>
        <li><a>2nd item</a></li>
        <li><a>3rd item</a></li>
        <li><a>4th item</a></li>
      </ul>
    </aside>
                
    <article>
      <p>contents here</p>
    </article>
        2
  •  1
  •   mzrnsh    8 年前

    您可能应该使用css3 calc(),这似乎是一个直接的用例。

    aside {
      background-color: blue;
      width: 100px; // modified, you did not indicate units
      list-style: none;
      height: 100%;
      float:left;
    }
    
    article {
      background-color: red;
      width:calc(100% - 100px); // modified
      height:100%;
      float: left;
    }
    <aside>
      <ul>
        <li><a>1st item</a></li>
        <li><a>2nd item</a></li>
        <li><a>3rd item</a></li>
        <li><a>4th item</a></li>
      </ul>
    </aside>
    
    <article>
      <p>contents here</p>
    </article>

    在此处阅读有关浏览器支持的信息: http://caniuse.com/#search=calc

        3
  •  0
  •   Aaron Mahlke    8 年前

    这样地?

    .wrap {
      display: flex;
    }
    aside {
        background-color: blue;
        width: 220;
        list-style: none;
        height: 100%;
    }
    
    article {
        background-color: red;
        height:100%;
        float: left;
        flex: 1;
    }
    <div class="wrap">
      
      <aside>
        <ul>
          <li><a>1st item</a></li>
          <li><a>2nd item</a></li>
          <li><a>3rd item</a></li>
          <li><a>4th item</a></li>
        </ul>
      </aside>
    
      <article>
        <p>contents here</p>
      </article>
    
    </div>