Подтвердить что ты не робот

Запретить float left div перейти к новой строке

У меня есть 4 divs, которые настроены на float left, но end div продолжает обматывать две новые строки на меньшем экране, что действительно раздражает меня... Я хочу, чтобы они масштабировались с размером экрана, поэтому они всегда остаются на то же самое, независимо от размера экрана... и я пытаюсь не использовать таблицу (которая очень заманчиво дает им v.reliable для этого!!!)

Мне интересно, как исправить эту досадную проблему, чтобы они всегда оставались на месте, независимо от размера экрана.

У меня это как мой CSS:

.wrapper{
    margin:0 auto;
    width: 80%;
    display: table-cell;
}
.gridf{
    float:left;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.grid{
    float:left;
    margin-left: 3px;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.gridl{
    float:left;
    margin-left: 3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}

Мой HTML:

<div style="overflow: hidden;">

 <div class="wrapper">

        <div class="gridf"></div>
        <div class="grid"></div>
        <div class="grid"></div>
        <div class="gridl"></div>

 </div> 



</div>

Пожалуйста, помогите: D

4b9b3361

ОТВЕТЫ

Ответ 1

Привет, я думаю, вы должны проверить эту демонстрацию

.wrapper {
  margin: 0 auto;
  width: 80%;
  border: solid 1px red;
  overflow: hidden;
}
.gridf,
.grid,
.gridl {
  Background: green;
  width: 24%;
  min-height: 100px;
  float: left;
  margin: 2px 0;
}
.gridf {} .grid {
  margin: 2px 1%;
}
.gridl {
  background: yellow;
}
<div class="wrapper">

  <div class="gridf">One</div>
  <div class="grid">Two</div>
  <div class="grid">Three</div>
  <div class="gridl">Four</div>

</div>

Ответ 2

Ваша обертка представляет собой контейнер с процентной шириной, в который входят 4 дочерних элемента с фиксированной шириной.

Ширина обертки зависит от ширины окна просмотра. Если область просмотра сужена до такой степени, что ширина обертки меньше, чем ширина четырех дочерних элементов, то, естественно, они не будут полностью соответствовать и, следовательно, будут обертываться.

Исправление состоит в том, чтобы убедиться, что ваша обложка не становится меньше, чем сочетание детей.

Итак, добавьте ширину, границы и поля дочерних элементов, а затем присвойте этому атрибуту атрибут min-width.

Ответ 3

Вы можете попытаться удалить правило отображения таблицы таблицы из обертки и установить проценты (или минимальные ширины) на дочерних divs, например, jsFiddle пример.

Ответ 4

Хотя это старый пост, я думаю, что проблема, с которой я сталкиваюсь, заключается в том, что вы хотите, чтобы все эти ячейки имели фиксированный размер, а не%, правильно? Выбранное вами решение изменило исходный формат, в котором вы указали width:200px;

Хорошо, я бы предложил посмотреть здесь: http://jsfiddle.net/gn2bg/

Единственное, что я сделал, это добавить внутреннюю оболочку вокруг ваших ячеек:

.inwrapper{
    float:left;
    overflow: hidden;
    min-width: 830px;
}

и новый html:

<div class="wrapper">
  <div class="inwrapper">
    <div class="gridf"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="gridl"></div>
  </div>
</div>

Обратите внимание, что для вашей обертки требуется 80% пространства. Однако inwrapper сообщает, что его размер фиксирован - 830px (общее количество всех внутренних размеров div плюс место для заполнения). Таким образом, inwrapper использует "локти" для растягивания ширины и переопределяет эти 80% "обертки"

Я понимаю, что вы уже приняли решение о том, каково ваше лучшее решение. Я оставляю этот ответ кому-то еще в будущем, которому нужен точный ответ на ваш точный вопрос.

Ответ 5

Это должно сделать трюк:

 <div class="wrapper">
     <div style="width:850px">
        <div class="gridf"></div>
        <div class="grid"></div>
        <div class="grid"></div>
        <div class="gridl"></div>
     </div>
 </div>

И это будет поддерживаться в любом браузере. http://jsfiddle.net/5GrKU/3/

Ответ 6

HTML

<div style="overflow: hidden;">

 <div class="wrapper">

        <div class="gridf"></div>
        <div class="grid"></div>
        <div class="grid"></div>
        <div class="gridl"></div>

 </div>

</div>

CSS

.wrapper{
    margin:0 auto;
    width: 80%;
    display: inline;
}
.gridf{
    float:left;
    margin-right:3px;
    width:20%;
    min-height:200px;
    border:1px solid red;
}
.grid{
    float:left;
    margin-left: 3px;
    margin-right:3px;
    width:20%;
    min-height:200px;
    border:1px solid red;
}
.gridl{
    float:left;
    margin-left: 3px;
    width:20%;
    min-height:200px;
    border:1px solid red;
}

для справки я также добавил URL-адрес демо. http://jsfiddle.net/sg8FE/

UPDATE

просто измените display:inline в классе-оболочке на display:block остальное все правильно, а div центрировано.

Ответ 7

задав фиксированную ширину в ваших внутренних div, вы вынуждаете их иметь такую ​​ширину независимо от размера порта представления. И, придавая внешнему div ширину 80%, вы уменьшаете его размер с шириной вашего порта представления. Вам нужно сделать либо фиксированную ширину для всех этих div, либо предоставить относительную ширину для всех.