Имате нужда от помощ при създаването на адаптивен мобилен CSS с помощта на ‹Div›s

Работя с два реда и 4 колони. Всеки div съдържа изображение, име на марката и цена.

Редовете се показват правилно, но не са центрирани и при преоразмеряване на прозореца div трябва да се подравнят към размера на екрана, което означава, че трябва да премине от 4 колони до 2 колони до 1 колона в зависимост от размера на екрана.

Искам да постигна 2 неща:

  1. Центрирайте двата реда на страницата, така че да е в средата.

  2. Уверете се, че реагира; iphone 6 и 5 са ​​приоритетни, следвани от таблети и android.

Моля, помогнете ми да изпълня тази задача.

Имам практически познания по 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. Бих предпочел да използвам Bootstrap css framework, за да направя отзивчивия дизайн подходящ. Тестван е на много устройства.   -  person Kiran Krishnan    schedule 26.02.2016
comment
също може да се наложи да коригирате формата на HTML обърнати запетаи <div class="row”> до <div class="row">   -  person kanudo    schedule 26.02.2016
comment
Канудо, предполагам, че горните стилове на col са в bootstrap. Тя създава персонализиран css, съмнявам се?   -  person Kiran Krishnan    schedule 26.02.2016
comment
Използвам bootstrap.min.css ... но не съм сигурен как да свържа всичко заедно?   -  person JessicaRod    schedule 27.02.2016
comment
Проверихте ли отзивчивите таблици без граници в bootstrap... това може да е решението за вас   -  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

Ти искаш :

два реда на страницата, така че да е в средата.

В bootstrap за отзивчив дизайн можете да направите следното:

<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