Как сместить цифры, чтобы сделать более красивую макет

Я хочу переместить некоторые элементы моего рисунка вверх и назад, чтобы получить вид таблицы 3x2 на моем сайте. В настоящее время это 2x3, и я не уверен, как сдвинуть фигуры вокруг. Мне бы очень хотелось, чтобы вы помогли мне.Как сместить цифры, чтобы сделать более красивую макет

вот HTML:

<html> 
<body> 
<div> 
<section> 
     <article> 
     <figure class="fig"> 
      <img src="parks/arches.jpg" alt="Arches" /> 
      <figcaption> 
      Arches National Park 
      </figcaption> 
     </figure> 
     <figure class="fig"> 
     <img src="parks/glacier.jpg" alt="Glacier" /> 
     <figcaption> 
     Glacier National Park 
     </figcaption> 
     </figure> 

     <figure class="fig"> 
     <img src="parks/teton.jpg" alt="Teton" /> 
     <figcaption>Grand Teton National Park</figcaption> 
     </figure> 

     <figure class="fig"> 
     <img src="parks/yellowstone.jpg" alt="Yellowstone" /> 
     <figcaption>Yellowstone National Park</figcaption> 
     </figure> 

     <figure class="fig"> 
     <img src="parks/yosemite.jpg" alt="Yosemite" /> 
     <figcaption>Yosemite National Park</figcaption> 
     </figure> 

     <figure class="fig"> 
     <img src="parks/zion.jpg" alt="Zion" /> 
     <figcaption>Zion National Park</figcaption> 
     </figure> 

     </article> 
     </section> 

     <footer> 
     <p>Get out and explore! &copy; 2017 <a href="#">Explore This World and Our Country and Other Stuff</a>.</p> 
     </footer> 
    </div> 
    <!--end wrap div--> 
    </body> 
    </html>

Вот CSS:

figure.fig{ 
    border: 1px solid white; 
    width: 250px; 
    float: left; 
    margin:5px, 5px, 0, 5px; 
    overflow:auto; 
    background-color:black; 



} 

figure.fig img{ 
    width:250px; 
    padding: 10px, 10px, 10px, 10px; 

} 
figure.fig figcaption 
{ 
    color: white; 
    margin: 5px; 
    text-align: center; 
    font-family: Times New Roman; 

}

источник

2017-02-21 themaster389

вероятно посмотреть на использование ''% вместо фиксированной ширины в вашем '' figure.fig' и figure.fig img' декларации стиль – haxxxton

Добавить эту поправку в код, figure tag имеет некоторое значение по умолчанию margin, что на стартовый набор для 0px тогда вы добавили padding, который был взломан, что grid и да вместо pixels%, как указано ниже,

figure{ 
 
margin:0; 
 
} 
 
.fig{ 
 
    width:28%; 
 
    height:auto; 
 
    background-color:black; 
 
    float:left; 
 
    margin:2%; 
 
    overflow:hidden; 
 
} 
 
.fig > figcaption{ 
 
    color: white; 
 
    text-align: center; 
 
    font-family: Times New Roman; 
 
}

<article> 
 
    <figure class="fig"> 
 
     <img src="parks/arches.jpg" alt="Arches" /> 
 
     <figcaption> 
 
     Arches National Park 
 
     </figcaption> 
 
    </figure> 
 
    <figure class="fig"> 
 
    <img src="parks/glacier.jpg" alt="Glacier" /> 
 
    <figcaption> 
 
    Glacier National Park 
 
    </figcaption> 
 
    </figure> 
 

 
    <figure class="fig"> 
 
    <img src="parks/teton.jpg" alt="Teton" /> 
 
    <figcaption>Grand Teton National Park</figcaption> 
 
    </figure> 
 

 
    <figure class="fig"> 
 
    <img src="parks/yellowstone.jpg" alt="Yellowstone" /> 
 
    <figcaption>Yellowstone National Park</figcaption> 
 
    </figure> 
 

 
    <figure class="fig"> 
 
    <img src="parks/yosemite.jpg" alt="Yosemite" /> 
 
    <figcaption>Yosemite National Park</figcaption> 
 
    </figure> 
 

 
    <figure class="fig"> 
 
    <img src="parks/zion.jpg" alt="Zion" /> 
 
    <figcaption>Zion National Park</figcaption> 
 
    </figure> 
 

 
    </article> 
 
    </section>

источник

2017-02-21 04:05:47 frnt

Как сместить цифры, чтобы сделать более красивую макет

ответ

Смежные вопросы