Нужна помощь в создании адаптивного мобильного CSS с использованием ‹Div›

Я работаю с двумя строками и 4 столбцами. Каждый div содержит изображение, название бренда и цену.

Строки отображаются правильно, но не по центру, и при изменении размера окна элементы div должны выравниваться по размеру экрана, что означает, что в зависимости от размера экрана должно быть от 4 столбцов до 2 столбцов и 1 столбца.

Я хочу добиться двух целей:

  1. Отцентрируйте две строки на странице так, чтобы они находились посередине.

  2. Убедитесь, что он отзывчив; iphone 6 и 5 в приоритете, за ними следуют планшеты и андроиды.

Пожалуйста, помогите мне выполнить это задание.

У меня есть практические знания CSS, но я еще не полностью понимаю адаптивный дизайн.

Моя таблица стилей выглядит так:

.row, .row2 {
margin-left: auto;
margin-right: auto;
}

.col-1-4 {
    width: 260px;
    height: 400px;
display: table-cell;
}

Вот HTML-код:

<div class="row”>

<div class="col-1-4"><a href=“some-url.html"><div class="span4"><img src=“someimage.jpg" width="260" border="0"><span class="text-content"><span>View Product</span></span></div></a><span class="b_name"><a href=“somebrandurl.html”>Brand Name</a></span><span class="p_name”>  Product Name  <br><br>Reg. Price: $19.99</span>
 </div>

<div class="col-1-4"><a href=“some-url.html"><div class="span4"><img src=“someimage.jpg" width="260" border="0"><span class="text-content"><span>View Product</span></span></div></a><span class="b_name"><a href=“somebrandurl.html”>Brand Name</a></span><span class="p_name”>  Product Name  <br><br>Reg. Price: $19.99</span>
 </div>

<div class="col-1-4"><a href=“some-url.html"><div class="span4"><img src=“someimage.jpg" width="260" border="0"><span class="text-content"><span>View Product</span></span></div></a><span class="b_name"><a href=“somebrandurl.html”>Brand Name</a></span><span class="p_name”>  Product Name  <br><br>Reg. Price: $19.99</span>
 </div>

<div class="col-1-4"><a href=“some-url.html"><div class="span4"><img src=“someimage.jpg" width="260" border="0"><span class="text-content"><span>View Product</span></span></div></a><span class="b_name"><a href=“somebrandurl.html”>Brand Name</a></span><span class="p_name”>  Product Name  <br><br>Reg. Price: $19.99</span>
 </div>

</div>

<div class="row2”>

<div class="col-1-4"><a href=“some-url.html"><div class="span4"><img src=“someimage.jpg" width="260" border="0"><span class="text-content"><span>View Product</span></span></div></a><span class="b_name"><a href=“somebrandurl.html”>Brand Name</a></span><span class="p_name”>  Product Name  <br><br>Reg. Price: $19.99</span>
 </div>

<div class="col-1-4"><a href=“some-url.html"><div class="span4"><img src=“someimage.jpg" width="260" border="0"><span class="text-content"><span>View Product</span></span></div></a><span class="b_name"><a href=“somebrandurl.html”>Brand Name</a></span><span class="p_name”>  Product Name  <br><br>Reg. Price: $19.99</span>
 </div>

<div class="col-1-4"><a href=“some-url.html"><div class="span4"><img src=“someimage.jpg" width="260" border="0"><span class="text-content"><span>View Product</span></span></div></a><span class="b_name"><a href=“somebrandurl.html”>Brand Name</a></span><span class="p_name”>  Product Name  <br><br>Reg. Price: $19.99</span>
 </div>

<div class="col-1-4"><a href=“some-url.html"><div class="span4"><img src=“someimage.jpg" width="260" border="0"><span class="text-content"><span>View Product</span></span></div></a><span class="b_name"><a href=“somebrandurl.html”>Brand Name</a></span><span class="p_name”>  Product Name  <br><br>Reg. Price: $19.99</span>
 </div>

</div>

Я просто не понимаю, что я делаю не так?


html css responsive-design centering
person JessicaRod    schedule 26.02.2016    source источник
comment
Вам нужно что-то вроде <div class="col-sm-1 col-md-2 col-lg-4"> вместо <div class="col-1-4">   -  person kanudo    schedule 26.02.2016
comment
Здравствуйте, вы пишете собственный адаптивный css с помощью Media Query. Я бы предпочел использовать CSS-фреймворк Bootstrap, чтобы сделать адаптивный дизайн правильным. Он протестирован на многих устройствах.   -  person Kiran Krishnan    schedule 26.02.2016
comment
также вам может потребоваться исправить форму кавычек HTML с <div class="row”> на <div class="row">   -  person kanudo    schedule 26.02.2016
comment
Канудо, я думаю, что вышеперечисленные стили col находятся в бутстрапе. Я сомневаюсь, что она создает собственный CSS?   -  person Kiran Krishnan    schedule 26.02.2016
comment
Я использую bootstrap.min.css... но не знаю, как соединить все вместе?   -  person JessicaRod    schedule 27.02.2016
comment
Вы проверили отзывчивые таблицы без границ в начальной загрузке... это может быть решением для вас   -  person MMG    schedule 27.02.2016

Ответы (2)


arrow_upward
1
arrow_downward

Вы пытаетесь заново изобрести колесо... Bootstrap/Foundation/PureCSS позволяет вам сделать это с гораздо большей точностью

person MG425    schedule 26.02.2016
comment
Поверьте мне, когда я говорю, что действительно не хочу... если я да, пожалуйста, направьте меня, как не делать этого, потому что я использую bootstrap.min.css, но я не знаю, как правильно его реализовать, чтобы я мог использовать его функции, чтобы делать то, что я хочу. - person JessicaRod; 27.02.2016

arrow_upward
1
arrow_downward

Ты хочешь :

две строки на странице так, чтобы она была посередине.

В начальной загрузке для адаптивного дизайна вы можете сделать следующее:

<div class = "container"><!-- this will center position -->
<div class="row">
  <div class=" col-xs-6 col-sm-6"> <!-- this coveres phones and tablets -->
     ... your code here
  </div>
  <div class=" col-xs-6 col-sm-6"> <!-- second row -->
    ... your code here
  </div>
</div>

Using brbreaks any kind off responsive design

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

person MMG    schedule 27.02.2016
comment
Я попробую это и сообщу вам ... Я рад собрать это вместе. Держать вас в курсе. - person JessicaRod; 29.02.2016
comment
дайте мне изображение или грубый набросок, который вы хотите, и я лучше помогу вам - person MMG; 01.03.2016