Question

我正在尝试设计一个响应式页面。我有两个高度相同的div。它们都具有max-width属性，并且max-width正在工作。一旦我添加了float：left属性，max-width就不会影响它们。

以下是一个示例：jsfiddle

<div class="color1">
   Some Text
</div>
<div class="color2">
    Bla
</div>
<div style="clear: both;">

和CSS：

div{
    height: 100px;
    float: left;
}
.color1{
    background-color: #6AC1FF;
    max-width: 400px;
}
.color2{
    background-color: #BDBCF4;
    max-width: 100px;
}

我希望它们垂直对齐。有没有其他方法可以使它除浮动和保持最大宽度？

Answer 1

使用定义的宽度百分比和浮动：http://jsfiddle.net/dEEW5/3/

div{
    height: 100px;
    display:block;
    float:left;
}
.color1{
    background-color: #6AC1FF;
    width: 80%;
    max-width:400px;
}
.color2{
    background-color: #BDBCF4;
    width: 20%;
    max-width:100px;
}

使用内联块定义的宽度百分比：http://jsfiddle.net/dEEW5/4/

body{font-size:0}
div{
    height: 100px;
    display:inline-block;
    font-size:16px;
}
.color1{
    background-color: #6AC1FF;
    width: 80%;
    max-width:400px;
}
.color2{
    background-color: #BDBCF4;
    width:20%;
    max-width:100px;
}

内联块，当第二个块无法再容纳在容器内而不是收缩时，第二个块会掉落：http://jsfiddle.net/dEEW5/5/

body{font-size:0}
div{
    height: 100px;
    display:inline-block;
    font-size:16px;
}
.color1{
    background-color: #6AC1FF;
    width: 100%;
    max-width:400px;
}
.color2{
    background-color: #BDBCF4;
    width:100%;
    max-width:100px;
}

Answer 2

让max-width: 400px消失后，允许div扩展为该值，您应该将其与min-width: (value);

结合使用

Answer 3

浮动时，你的div没有指定的宽度;因此它们默认为内容的宽度（因此不是400px / 100px宽）。

Answer 4

在px中使用特定宽度作为最大视图，然后设置＆＃34; max-width：100％＆＃34;。

e.g。

 div{
    height: 100px;
    display:block;
    float:left;
}
.color1{
    background-color: #6AC1FF;
    width: 400px;
    max-width:100%;
}
.color2{
    background-color: #BDBCF4;
    width: 100px;
    max-width:100%;
}

对于我的网站，一旦屏幕尺寸太小而无法并排显示，我很高兴两个div显示为100％。但是，如果您想要响应性中的另一个步骤，您可以在额外的@media查询中添加，以便在它们达到100％宽度之前选择中间步骤。

Answer 5

我开始使用flex，我认为这可能是我自己的问题的一个很好的答案。我添加了一个包含display: flex的容器，并将每个div设置为flex-grow。

Example

HTML

<div class="cont">
  <div class="color1">
      Some Text
  </div>
  <div class="color2">
      Bla
  </div>
  <div style="clear: both;">
</div>

CSS

div{
    height: 100px;
}
.cont{
     display: flex;
}
.color1{
    background-color: #6AC1FF;
    flex-grow: 4;
    max-width: 400px;
}
.color2{
    background-color: #BDBCF4;
    flex-grow: 1;
    max-width: 100px;
}

max-width不适用于float

5 个答案:

HTML

CSS