Предотвратить перемещение левого div в новую строку

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

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

У меня есть это как мой 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

 Murtaza05 июн. 2012 г., 06:13
пожалуйста, обратитесьjsfiddle.net/sg8FE пример, заменитьdisplay: table-cell; из вашего класса оболочкиdisplay:inline, не забудьте обновить ширину в% для сетки div
 Murtaza05 июн. 2012 г., 06:09
просто укажите ширину вашей сетки в%, попробуйте 20% для каждого элемента.
 Sir05 июн. 2012 г., 06:15
@ Муртаза, они не центр, хотя в этом и проблема = /
 DA.05 июн. 2012 г., 06:10
20% не будут работать, поскольку каждая сетка также имеет поле и границу.

Ответы на вопрос(7)

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

 Sir05 июн. 2012 г., 05:56
Ах, это сработало, хотя это не совсем для меня главное ... есть ли хитрость, чтобы сделать их красивыми и сосредоточенными?

Хотя это старый пост, я думаю, что проблема, с которой я также столкнулся, заключается в том, что вы хотите, чтобы все эти ячейки имели фиксированный размер, а не%, верно? Выбранное вами решение изменило исходный формат, в котором вы указали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 плюс место для заполнения). Таким образом, упаковщик использует «локти»; растянуть ширину и переопределить эти 80% «обертки»;

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

Решение Вопроса

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

.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>

 Sir06 июн. 2012 г., 01:42
спасибо работает! :)
 10 июл. 2014 г., 11:15
Тебе следовало бы немного объяснить, этот ответ никому не нужен.
 02 мая 2014 г., 08:10
Я вижу, что это работает. но я не вижу изменений, которые вы сделали. Я немного новичок. пожалуйста, кто-нибудь, помогите мне.

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 центрированы.

 Sir05 июн. 2012 г., 06:38
это еще не центр: P
 Sir05 июн. 2012 г., 06:16
как я могу получить 4 из них, чтобы быть в центре родительского div?
 05 июн. 2012 г., 06:27
отослать этоjsfiddle.net/sg8FE/1 ваша проблема решена ... замененаdisplay:inline от класса оболочки доdisplay:block

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

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

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

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

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

Это должно делать свое дело :

 <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/

Ваш ответ на вопрос