Question

我想实现以下目标：具有两个相同宽度的列的设计，覆盖文档的整个宽度，或固定的像素宽度，以较小者为准。当它们被调整到一定宽度时，它们应该在彼此之下移动并占据屏幕宽度的至多100％（恰好100％会很好，但不是必需的。）

我提出了以下代码，但100％的max-width未获得应用。

我可以将百分比宽度和最大宽度百分比组合起来吗？如果没有另一层div，这可能吗？这有可能吗？

＆＃13;

    #head {
      background-color: #00FF00;
    }
    body {
      text-align: center;
    }
    #container {
      margin: 0 auto;
      width: 100%;
      max-width: 500px;
      text-align: center;
    }
    #left {
      background-color: #FF0000;
      float: left;
      width: 50%;
      min-width: 150px;
      max-width: 100%;
    }
    #right {
      background-color: #0000FF;
      float: left;
      width: 50%;
      min-width: 150px;
      max-width: 100%;
    }

＆＃13;

<div id="head">
  foo
</div>
<div id="container">
  <div id="left">
    bar
  </div>
  <div id="right">
    baz
  </div>
</div>

＆＃13;

Answer 1

您可以使用flex和min-width：http://codepen.io/anon/pen/JXNMgd

 /* added */
 #container {
   display: flex;
   flex-wrap: wrap;
 }
 #left,
 #right {
   flex: 1;
 }


 /* your css cleared a bit */
 #head {
   background-color: #00FF00;
 }
 body {
   text-align: center;
 }
 #container {
   margin: 0 auto;
   max-width: 500px;
   text-align: center;
 }
 #left,
 #right {
   background-color: #FF0000;
   min-width: 150px;
 }
 #right {
   background-color: #0000FF;
 }

<div id="head">
  foo
</div>
<div id="container">
  <div id="left">
    bar
  </div>
  <div id="right">
    baz
  </div>
</div>

Answer 2

我认为您需要媒体查询。您可以设置不同视口的宽度。

use strict;
use warnings;
use v5.10;

my @sorted = map  { $_->[0] }
             sort { $a->[1] <=> $b->[1] }
             map  { [$_, length($_)] }
             qw(AAAA CGTGATG CGTGATTTGG);

say $sorted[-1];
say pop(@sorted);

#head {
    background-color:#00FF00;
}
body {
    text-align:center;
}
#container{
    margin: 0 auto;
    width:100%;
    max-width:500px;
    text-align:center;
}
#left {
    background-color:#FF0000;
    float: left;
    width: 50%;
    min-width: 150px;
    max-width: 100%;
}
#right {
    background-color:#0000FF;
    float: left;
    width: 50%;
    min-width: 150px;
    max-width: 100%;
}

@media (max-width: 500px) {
    #left { width: 100%;}
    #right { width: 100%;}
}

宽度，最小宽度和最大宽度的组合

2 个答案: