0

При обычном экране блоки по центру с равным расстоянием, но при уменьшении жмутся к левому краю

#works{
  position: absolute;
  width: 100%;
  height: 700px;
  background-color: #fbfaf8;
  margin-top: 100px
}
.portfolio{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 30px;
}

.portfolio ul,
.portfolio li{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.portfolio li{
  display: inline-block;
  width: 300px;
  position: relative;
  overflow: hidden;
}
.portfolio img{
  max-width: 100%;
  display: block;
}
.descr{
  position: absolute;
  left: 0;
  width: 100%;
  height: 145px;
  background-color: rgba(0, 0, 0, .5);
  color: white;
  padding-top: 80px;
  text-align: center;
  opacity: 0;
  top: 100%;
  -webkit-transition:  all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}
.portfolio li:hover .descr{
  opacity: 1;
  top: 0px;
}
<section id="works">
      <h1>Примеры работ</h1>
      <div class="portfolio">
        <ul>
          <li><span class="descr">Описание</span><img src="http://www.zastavki.com/pictures/1366x768/2005/Animals_Cats__001795_1.jpg" alt="alt"></li>
          <li><span class="descr">Описание</span><img src="http://www.zastavki.com/pictures/1366x768/2005/Animals_Cats__001795_1.jpg" alt="alt"></li>
          <li><span class="descr">Описание</span><img src="http://www.zastavki.com/pictures/1366x768/2005/Animals_Cats__001795_1.jpg" alt="alt"></li>
        </ul>
    </section>

3
  • В этом редакторе не видно этого(
    – Егор
    24 авг 2017 в 16:14
  • Естественно "жмутся", вы же указали для них фиксированную ширину, вот они и сдвигаются, когда места под них не хватает. Как в идеале должны вести себя блоки при более мелком разрешении?
    – Cheg
    24 авг 2017 в 16:49
  • Располагаться в центре и идти вертикально
    – Егор
    24 авг 2017 в 17:05

1 ответ 1

1

У вас куча стандартных стилей браузеров применяется к спискам, заголовкам и подобным элементам, поэтому такое не корректное поведение. Вот и проблема:

введите сюда описание изображения

Обычно лучше сбросить стандартные стили, например с помощью ResetCSS. Почитать подробнее можно тут.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
#works{
  position: absolute;
  width: 100%;
  height: 700px;
  background-color: #fbfaf8;
  margin-top: 100px
}
.portfolio{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 30px;
}
.portfolio ul,
.portfolio li{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.portfolio li{
  display: inline-block;
  width: 300px;
  position: relative;
  overflow: hidden;
}
.portfolio img{
  max-width: 100%;
  display: block;
}
.descr{
  position: absolute;
  left: 0;
  width: 100%;
  height: 145px;
  background-color: rgba(0, 0, 0, .5);
  color: white;
  padding-top: 80px;
  text-align: center;
  opacity: 0;
  top: 100%;
  -webkit-transition:  all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}
.portfolio li:hover .descr{
  opacity: 1;
  top: 0px;
}
h1 {
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    font-weight: bold;
}
<section id="works">
      <h1>Примеры работ</h1>
      <div class="portfolio">
        <ul>
          <li><span class="descr">Описание</span><img src="http://www.zastavki.com/pictures/1366x768/2005/Animals_Cats__001795_1.jpg" alt="alt"></li>
          <li><span class="descr">Описание</span><img src="http://www.zastavki.com/pictures/1366x768/2005/Animals_Cats__001795_1.jpg" alt="alt"></li>
          <li><span class="descr">Описание</span><img src="http://www.zastavki.com/pictures/1366x768/2005/Animals_Cats__001795_1.jpg" alt="alt"></li>
        </ul>
    </section>

1
  • при уменьшении станицы блоки не встают вертикально по центру - нужно боковые маргины auto к #works добавить , или что-то в этом роде
    – jurvrn
    28 авг 2021 в 19:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.