max-width не работает с float

Я пытаюсь создать отзывчивую страницу. У меня 2 дива одинаковой высоты. Они оба имеют свойство max-width и max-width работает. Как только я добавляю свойство float: left, максимальная ширина не влияет на них.

вот пример: 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;
}

Я хочу, чтобы они были выровнены по вертикали. Есть ли другой способ сделать это, кроме как плавать и сохранить максимальную ширину?

6
css css-float responsive-design

5 ответов

используйте определенные проценты ширины и float: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;
}

Inline-block, где 2-й блок падает, когда он больше не может поместиться в контейнер вместо сжатия: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;
}
9

С max-width: 400px ушел, чтобы div расширился до этого, вы должны объединить его с min-width: (value);

0

при плавании ваши divs не имеют заданной ширины; таким образом, они по умолчанию имеют ширину содержимого (следовательно, не 400px/100px в ширину).

0

используйте определенную ширину в px для вашего наибольшего вида, а затем установите "max-width: 100%".

например 

 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%;
}

для моего сайта я был доволен отображением обоих divs на 100%, как только размер экрана был слишком мал, чтобы отображать их бок о бок. Но если вы хотите еще один шаг в отзывчивости, вы можете добавить дополнительный запрос @media, чтобы выбрать промежуточный шаг, прежде чем они перейдут на 100% ширину.

0

Я начал использовать flex, и я подумал, что это может быть хорошим ответом на мой собственный вопрос. Я добавил контейнер с display: flex и установите каждый div a flex-grow.

пример

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;
}
0