устранение проблем в Foundation 5

Question

устранение проблем в Foundation 5

0

при масштабировании окон окна, которые выпадают из сетки, у кого-то есть предложения? кажется, что если столбцы не одинакового размера, выпадают из маленьких 6

<div class="large-3 columns small-6 text-center"><img src="img/1.png" width="150" height="150">
  <h2> 1</h2>
  <h3>Lorem ipsum dolor sit amet</h3>
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis </p></div>
<div class="large-3 columns small-6 text-center">
<img src="img/2.png" width="150" height="150">
  <h2>2</h2>
  <h3> Lorem ipsum </h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet veniam, quis  </p></div>

<div class="large-3 columns small-6 text-center">
<img src="img/3.png" width="150" height="150">
<h2>3</h2>
  <h3>Is even more essential</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut wisi enim ad minim veniam, quis </p></div>
<div class="large-3 columns small-6 text-center">
<img src="img/4.png" width="150" height="150">
 <h2>4</h2>
  <h3>Lorem ipsum dolor sit</h3>
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis </p></div>
</div>![enter image description here][1]

domma2009 13 дек. 2013, в 12:56

Источник

0

Пожалуйста, попробуйте предоставить больше информации о проблеме. Что вы пытались это исправить? Скриншот также будет полезен в этом случае.
Danstahr 13 дек. 2013, в 12:11

Теги:

html

zurb-foundation

css

1 ответ

Ещё вопросы

Пожалуйста, попробуйте предоставить больше информации о проблеме. Что вы пытались это исправить? Скриншот также будет полезен в этом случае.

Slawa Eremkin · Answer 1 · 2013-12-13T17-16-00.000Z

Если я правильно понимаю, у вас проблема на маленьком экране. Возможно, вам помогут очистка флоат-элементов. Эта очистка будет отображаться только для небольших экранов

Попробуйте добавить после двух элементов.columns:

<div class="clearfix show-for-small"></div>

.clearfix {
  *zoom: 1; 
}

.clearfix:before, 
.clearfix:after {
    content: " ";
    display: table; 
}

.clearfix:after {
    clear: both; 
}

Гм, решение в том, что столбцы имеют одинаковую высоту, тогда float работает как надо