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

12

У меня есть 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

просто укажите ширину вашей сетки в%, попробуйте 20% для каждого элемента. Murtaza
20% не будут работать, поскольку каждая сетка также имеет поле и границу. DA.
@ Муртаза, они не центр, хотя в этом и проблема = / Sir
пожалуйста, обратитесьjsfiddle.net/sg8FE пример, заменитьdisplay: table-cell; из вашего класса оболочкиdisplay:inline, не забудьте обновить ширину в% для сетки div Murtaza

Ваш Ответ

7   ответов
1

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

Ах, это сработало, хотя это не совсем для меня главное ... есть ли хитрость, чтобы сделать их красивыми и сосредоточенными? Sir
5

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

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

спасибо работает! :) Sir
Тебе следовало бы немного объяснить, этот ответ никому не нужен.
Я вижу, что это работает. но я не вижу изменений, которые вы сделали. Я немного новичок. пожалуйста, кто-нибудь, помогите мне.
0

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

0

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

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

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

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

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

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

0

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

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

1

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

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

Похожие вопросы