1. дома
  2. Вопрос и ответ
  3. Выровнять элементы div на следующей строке

Выровнять элементы div на следующей строке

2015-10-01 3 views
0

Что мне нужно, это сетка изображений. Первая строка из четырех картин выглядит великолепно. Но я не могу найти решение для размещения второй линии. Ну, я знаю, что я могу использовать ul li вместе с дисплеем: inline-block и vertical-align: text-top; но я хочу решение div. Спасибо.Выровнять элементы div на следующей строке

.partners 
 
{ 
 
margin: 77px auto 0 auto; 
 
overflow: auto; 
 
text-align: center; 
 
width: 940px; 
 
} 
 
.partners__h2 
 
{ 
 
color: #333; 
 
font-size: 22px; 
 
font-weight: bold; 
 
margin-bottom: 32px; 
 
text-align: center; 
 
} 
 
.partner__pic__wrap 
 
{ 
 
height: 120px; 
 
margin: 0 auto; 
 
position: relative; 
 
width: 120px; 
 
} 
 
.partner__icon 
 
{ 
 
background-repeat: no-repeat; 
 
background-size: cover; 
 
border: 4px solid #fff; 
 
border-radius: 50%; 
 
bottom: -5px; 
 
height: 32px; 
 
position: absolute; 
 
right: -4px; 
 
width: 32px; 
 
z-index: 1; 
 
} 
 
.partner__pic__hover:hover 
 
{ 
 
filter: alpha(opacity=70); 
 
opacity: 0.7; 
 
} 
 
.partner__wrap 
 
{ 
 
bottom: 0; 
 
text-align: center; 
 
width: 100%; 
 
} 
 
.partner__name 
 
{ 
 
color: #333; 
 
display: block; 
 
float: left; 
 
font-size: 14px; 
 
font-weight: bold; 
 
margin-bottom: 0px; 
 
width: 100%; 
 
} 
 
.partner__description 
 
{ 
 
color: #666; 
 
float: left; 
 
font-family: Roboto; 
 
font-size: 14px; 
 
font-weight: 300; 
 
margin-top: 10px; 
 
text-align: center; 
 
} 
 
.partner__1 
 
{ 
 
float: left; 
 
height: 100%; 
 
position: relative; 
 
width: 221px; 
 
} 
 
.partner__1__icon 
 
{ 
 
background-color: #ff4e50; 
 
background-image: url('http://www.q-park.co.uk/DesktopModules/QPark.AdvancedPFL/image.aspx?ServiceID=49'); 
 
} 
 
.partner__1__pic 
 
{ 
 
background-image: url('http://cdn.bmwblog.com/wp-content/uploads/BMW-M235i-racing-car-las-vegas-02-120x120.jpg'); 
 
background-position: center; 
 
border-radius: 50%; 
 
float: left; 
 
height: 120px; 
 
moz-border-radius: 50%; 
 
webkit-border-radius: 50%; 
 
width: 120px; 
 
} 
 
.partner__2 
 
{ 
 
float: left; 
 
height: 100%; 
 
margin-left: 19px; 
 
position: relative; 
 
width: 221px; 
 
} 
 
.partner__2__icon 
 
{ 
 
background-color: #1cd7ad; 
 
background-image: url('http://www.q-park.co.uk/DesktopModules/QPark.AdvancedPFL/image.aspx?ServiceID=49'); 
 
} 
 
.partner__2__pic 
 
{ 
 
background-image: url('http://cdn.bmwblog.com/wp-content/uploads/BMW-M235i-racing-car-las-vegas-02-120x120.jpg'); 
 
background-position: center top; 
 
border-radius: 50%; 
 
float: left; 
 
height: 120px; 
 
moz-border-radius: 50%; 
 
webkit-border-radius: 50%; 
 
width: 120px; 
 
} 
 
.partner__3 
 
{ 
 
float: left; 
 
height: 100%; 
 
margin-left: 19px; 
 
position: relative; 
 
width: 221px; 
 
} 
 
.partner__3__icon 
 
{ 
 
background-color: #ffa507; 
 
background-image: url('http://www.q-park.co.uk/DesktopModules/QPark.AdvancedPFL/image.aspx?ServiceID=49'); 
 
} 
 
.partner__3__pic 
 
{ 
 
background-image: url('http://cdn.bmwblog.com/wp-content/uploads/BMW-M235i-racing-car-las-vegas-02-120x120.jpg'); 
 
background-position: center top; 
 
border-radius: 50%; 
 
float: left; 
 
height: 120px; 
 
moz-border-radius: 50%; 
 
webkit-border-radius: 50%; 
 
width: 120px; 
 
} 
 
.partner__4 
 
{ 
 
float: left; 
 
height: 100%; 
 
margin-left: 20px; 
 
position: relative; 
 
width: 219px; 
 
} 
 
.partner__4__icon 
 
{ 
 
background-color: #4e73db; 
 
background-image: url('http://www.q-park.co.uk/DesktopModules/QPark.AdvancedPFL/image.aspx?ServiceID=49'); 
 
} 
 
.partner__4__pic 
 
{ 
 
background-image: url('http://cdn.bmwblog.com/wp-content/uploads/BMW-M235i-racing-car-las-vegas-02-120x120.jpg'); 
 
background-position: center top; 
 
border-radius: 50%; 
 
float: left; 
 
height: 120px; 
 
moz-border-radius: 50%; 
 
webkit-border-radius: 50%; 
 
width: 120px; 
 
} 
 
.partner__5, .partner__6, .partner__7, .partner__8 
 
{ 
 
float: left; 
 
height: 100%; 
 
position: relative; 
 
width: 221px; 
 
}
<div class="partners"> 
 
<div class="partners__container"> 
 
    <h2 class="partners__h2">Lorem ipsum dolor sit amet, consectetuer</h2> 
 
    <div class="partner__1"> 
 
     <div class="partner__pic__wrap"> 
 
      <div class="partner__1__icon partner__icon"></div> 
 
      <a class="partner__1__pic partner__pic__hover" href="#"></a> 
 
     </div> 
 
     <div class="partner__wrap"> 
 
      <h4 class="partner__name">Lorem ipsum dolor</h4> 
 
      <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer</p> 
 
     </div> 
 
    </div> 
 
    <div class="partner__2"> 
 
     <div class="partner__pic__wrap"> 
 
      <div class="partner__2__icon partner__icon"></div> 
 
      <a class="partner__2__pic partner__pic__hover" href="#"></a> 
 
     </div> 
 
     <div class="partner__wrap"> 
 
      <h4 class="partner__name">Lorem ipsum dolor</h4> 
 
      <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer</p> 
 
     </div> 
 
    </div> 
 
    <div class="partner__3"> 
 
     <div class="partner__pic__wrap"> 
 
      <div class="partner__3__icon partner__icon"></div> 
 
      <a class="partner__3__pic partner__pic__hover" href="#"></a> 
 
     </div> 
 
     <div class="partner_wrap"> 
 
      <h4 class="partner__name">Lorem ipsum dolor</h4> 
 
      <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
     </div> 
 
    </div> 
 
    <div class="partner__4"> 
 
     <div class="partner__pic__wrap"> 
 
      <div class="partner__4__icon partner__icon"></div> 
 
      <a class="partner__4__pic partner__pic__hover" href="#"></a> 
 
     </div> 
 
     <div class="partner_wrap"> 
 
      <h4 class="partner__name">Lorem ipsum dolor</h4> 
 
      <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer</p> 
 
     </div> 
 
    </div> 
 
    <div class="partner__5"> 
 
     <div class="partner__pic__wrap"> 
 
      <div class="partner__4__icon partner__icon"></div> 
 
      <a class="partner__4__pic partner__pic__hover" href="#"></a> 
 
     </div> 
 
     <div class="partner_wrap"> 
 
      <h4 class="partner__name">Lorem ipsum dolor</h4> 
 
      <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer</p> 
 
     </div> 
 
    </div> 
 
    <div class="partner__6"> 
 
     <div class="partner__pic__wrap"> 
 
      <div class="partner__4__icon partner__icon"></div> 
 
      <a class="partner__4__pic partner__pic__hover" href="#"></a> 
 
     </div> 
 
     <div class="partner_wrap"> 
 
      <h4 class="partner__name">Lorem ipsum dolor</h4> 
 
      <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer</p> 
 
     </div> 
 
    </div> 
 
    <div class="partner__7"> 
 
     <div class="partner__pic__wrap"> 
 
      <div class="partner__4__icon partner__icon"></div> 
 
      <a class="partner__4__pic partner__pic__hover" href="#"></a> 
 
     </div> 
 
     <div class="partner_wrap"> 
 
      <h4 class="partner__name">Lorem ipsum dolor</h4> 
 
      <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer</p> 
 
     </div> 
 
    </div> 
 
    <div class="partner__8"> 
 
     <div class="partner__pic__wrap"> 
 
      <div class="partner__4__icon partner__icon"></div> 
 
      <a class="partner__4__pic partner__pic__hover" href="#"></a> 
 
     </div> 
 
     <div class="partner_wrap"> 
 
      <h4 class="partner__name">Lorem ipsum dolor</h4> 
 
      <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer</p> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

источник

2015-10-01 Artem Z

+0

есть вы пытаетесь Flexbox? он идеален для такого рода структуры. –

+0

Нет, но спасибо за идею. –

ответ

0

Вы можете использовать flexbox

CSS

.partners__container { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
} 
.partners__container > div { 
    -webkit-flex: 1 0 20%; 
    flex: 1 0 20%; 
}

DEMO HERE

источник

2015-10-01 12:17:55

0

Вы должны дать фиксированную высоту вместо 100% для всех 8 блоков.

.partner__1, .partner__2, .partner__3, .partner__4, .partner__5, .partner__6, .partner__7, .partner__8 { 
    height: 220px; 
}

источник

2015-10-01 12:14:47

+0

Спасибо. На самом деле я это знал. Но есть ли другой путь? –

+0

в противном случае вы можете попробовать концепцию flexbox, см. Ответ Луиса выше –

0

вы можете попробовать это:

.partners__container { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
} 
.partners__container > div { 
    -webkit-flex: 1 0 20%; 
    flex: 1 0 20%; 
} 
.partners { 
    width: 940px; 
    text-align:center; 
    margin: 77px auto 0 auto; 
    overflow: auto; 
} 
.partners__h2 { 
    color: #333; 
    font-weight: bold; 
    font-size: 22px; 
    text-align: center; 
    margin-bottom: 32px; 
} 
.partner__pic__wrap { 
    width: 120px; 
    height: 120px; 
    margin: 0 auto; 
    position: relative; 
} 
.partner__icon { 
    border-radius: 50%; 
    background-repeat: no-repeat; 
    background-size: cover; 
    width: 32px; 
    height: 32px; 
    position: absolute; 
    bottom: -5px; 
    right: -4px; 
    z-index: 1; 
    border: 4px solid #fff; 
} 
.partner__pic__hover:hover { 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
} 
.partner__wrap { 
    bottom: 0; 
    width: 100%; 
    text-align:center; 
} 
.partner__name { 
    display: block; 
    float:left; 
    width:100%; 
    font-weight: bold; 
    color: #333; 
    font-size: 14px; 
    margin-bottom: 0px; 
} 
.partner__description { 
    font-family: Roboto; 
    font-weight: 300; 
    color: #666; 
    font-size: 14px; 
    text-align: center; 
    float:left; 
    margin-top: 10px; 
} 
.partner__1 { 
    float:left; 
    width:221px; 
    height: 100%; 
    position: relative; 
} 
.partner__1__icon { 
    background-image: url('http://www.q-park.co.uk/DesktopModules/QPark.AdvancedPFL/image.aspx?ServiceID=49'); 
    background-color: #ff4e50; 
} 
.partner__1__pic { 
    background-image: url('http://cdn.bmwblog.com/wp-content/uploads/BMW-M235i-racing-car-las-vegas-02-120x120.jpg'); 
    background-position: center; 
    float: left; 
    width: 120px; 
    height: 120px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
} 
.partner__2 { 
    float:left; 
    width:221px; 
    height: 100%; 
    margin-left: 19px; 
    position: relative; 
} 
.partner__2__icon { 
    background-image: url('http://www.q-park.co.uk/DesktopModules/QPark.AdvancedPFL/image.aspx?ServiceID=49'); 
    background-color: #1cd7ad; 
} 
.partner__2__pic { 
    background-image: url('http://cdn.bmwblog.com/wp-content/uploads/BMW-M235i-racing-car-las-vegas-02-120x120.jpg'); 
    background-position: center top; 
    float: left; 
    width: 120px; 
    height: 120px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
} 
.partner__3 { 
    float:left; 
    width:221px; 
    height: 100%; 
    margin-left: 19px; 
    position: relative; 
} 
.partner__3__icon { 
    background-image: url('http://www.q-park.co.uk/DesktopModules/QPark.AdvancedPFL/image.aspx?ServiceID=49'); 
    background-color: #ffa507; 
} 
.partner__3__pic { 
    background-image: url('http://cdn.bmwblog.com/wp-content/uploads/BMW-M235i-racing-car-las-vegas-02-120x120.jpg'); 
    background-position: center top; 
    float: left; 
    width: 120px; 
    height: 120px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
} 
.partner__4 { 
    float:left; 
    width:219px; 
    height: 100%; 
    margin-left: 20px; 
    position: relative; 
} 
.partner__4__icon { 
    background-image: url('http://www.q-park.co.uk/DesktopModules/QPark.AdvancedPFL/image.aspx?ServiceID=49'); 
    background-color: #4e73db; 
} 
.partner__4__pic { 
    background-image: url('http://cdn.bmwblog.com/wp-content/uploads/BMW-M235i-racing-car-las-vegas-02-120x120.jpg'); 
    background-position: center top; 
    float: left; 
    width: 120px; 
    height: 120px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
} 
.partner__5, .partner__6, .partner__7, .partner__8 { 
    float:left; 
    width:221px; 
    height: 100%; 
    position: relative; 
}

DEMO FIDDLE

источник

2015-10-01 12:21:08

0 

.partners 
 
{ 
 
\t margin: 77px auto 0 auto; 
 
\t overflow: auto; 
 
\t text-align: center; 
 
\t width: 940px; 
 
} 
 
.partners__h2 
 
{ 
 
\t color: #333; 
 
    \t font-size: 22px; 
 
\t font-weight: bold; 
 
\t margin-bottom: 32px; 
 
\t text-align: center; 
 
} 
 
.partner__pic__wrap 
 
{ 
 
\t height: 120px; 
 
    \t margin: 0 auto; 
 
\t position: relative; 
 
\t width: 120px; 
 
} 
 
.partner__icon 
 
{ 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
\t border: 4px solid #fff; 
 
\t border-radius: 50%; 
 
\t bottom: -5px; 
 
\t height: 32px; 
 
\t position: absolute; 
 
\t right: -4px; 
 
\t width: 32px; 
 
\t z-index: 1; 
 
} 
 
.partner__pic__hover:hover 
 
{ 
 
\t filter: alpha(opacity=70); 
 
\t opacity: 0.7; 
 
} 
 
.partner__wrap 
 
{ 
 
\t bottom: 0; 
 
\t text-align: center; 
 
\t width: 100%; 
 
} 
 
.partner__name 
 
{ 
 
\t color: #333; 
 
\t display: block; 
 
\t float: left; 
 
\t font-size: 14px; 
 
\t font-weight: bold; 
 
    \t margin-bottom: 0px; 
 
    \t width: 100%; 
 
} 
 
.partner__description 
 
{ 
 
\t color: #666; 
 
\t float: left; 
 
\t font-family: Roboto; 
 
\t font-size: 14px; 
 
\t font-weight: 300; 
 
\t margin-top: 10px; 
 
\t text-align: center; 
 
} 
 
.partner 
 
{ 
 
\t float: left; 
 
\t height: 100%; 
 
\t position: relative; 
 
\t margin-left:10px; 
 
\t width: 221px;  \t 
 
} 
 
.partner__1__icon 
 
{ 
 
\t background-color: #ff4e50; 
 
\t background-image: url('http://www.q-park.co.uk/DesktopModules/QPark.AdvancedPFL/image.aspx?ServiceID=49'); 
 
} 
 
.partner__1__pic 
 
{ 
 
    \t background-image: url('http://cdn.bmwblog.com/wp-content/uploads/BMW-M235i-racing-car-las-vegas-02-120x120.jpg'); 
 
    \t background-position: center; 
 
\t border-radius: 50%; 
 
\t float: left; 
 
    \t height: 120px; 
 
\t moz-border-radius: 50%; 
 
\t webkit-border-radius: 50%; 
 
\t width: 120px; 
 
} 
 

 
.partner__2__icon 
 
{ 
 
\t background-color: #1cd7ad; 
 
\t background-image: url('http://www.q-park.co.uk/DesktopModules/QPark.AdvancedPFL/image.aspx?ServiceID=49'); 
 
} 
 
.partner__2__pic 
 
{ 
 
background-image: url('http://cdn.bmwblog.com/wp-content/uploads/BMW-M235i-racing-car-las-vegas-02-120x120.jpg'); 
 
background-position: center top; 
 
border-radius: 50%; 
 
float: left; 
 
height: 120px; 
 
moz-border-radius: 50%; 
 
webkit-border-radius: 50%; 
 
width: 120px; 
 
} 
 
    
 
.partner__3__icon 
 
{ 
 
background-color: #ffa507; 
 
background-image: url('http://www.q-park.co.uk/DesktopModules/QPark.AdvancedPFL/image.aspx?ServiceID=49'); 
 
} 
 
.partner__3__pic 
 
{ 
 
background-image: url('http://cdn.bmwblog.com/wp-content/uploads/BMW-M235i-racing-car-las-vegas-02-120x120.jpg'); 
 
background-position: center top; 
 
border-radius: 50%; 
 
float: left; 
 
height: 120px; 
 
moz-border-radius: 50%; 
 
webkit-border-radius: 50%; 
 
width: 120px; 
 
} 
 
    
 
.partner__4__icon 
 
{ 
 
background-color: #4e73db; 
 
background-image: url('http://www.q-park.co.uk/DesktopModules/QPark.AdvancedPFL/image.aspx?ServiceID=49'); 
 
} 
 
.partner__4__pic 
 
{ 
 
background-image: url('http://cdn.bmwblog.com/wp-content/uploads/BMW-M235i-racing-car-las-vegas-02-120x120.jpg'); 
 
background-position: center top; 
 
border-radius: 50%; 
 
float: left; 
 
height: 120px; 
 
moz-border-radius: 50%; 
 
webkit-border-radius: 50%; 
 
width: 120px; 
 
} 
 

<div class="partners"> 
 
<div class="partners__container"> 
 
    <h2 class="partners__h2">Lorem ipsum dolor sit amet, consectetuer</h2> 
 
    <div class="partner"> 
 
     <div class="partner__pic__wrap"> 
 
      <div class="partner__1__icon partner__icon"></div> 
 
      <a class="partner__1__pic partner__pic__hover" href="#"></a> 
 
     </div> 
 
     <div class="partner__wrap"> 
 
      <h4 class="partner__name">Lorem ipsum dolor</h4> 
 
      <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer</p> 
 
     </div> 
 
    </div> 
 
    <div class="partner"> 
 
     <div class="partner__pic__wrap"> 
 
      <div class="partner__2__icon partner__icon"></div> 
 
      <a class="partner__2__pic partner__pic__hover" href="#"></a> 
 
     </div> 
 
     <div class="partner__wrap"> 
 
      <h4 class="partner__name">Lorem ipsum dolor</h4> 
 
      <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer</p> 
 
     </div> 
 
    </div> 
 
    <div class="partner"> 
 
     <div class="partner__pic__wrap"> 
 
      <div class="partner__3__icon partner__icon"></div> 
 
      <a class="partner__3__pic partner__pic__hover" href="#"></a> 
 
     </div> 
 
     <div class="partner_wrap"> 
 
      <h4 class="partner__name">Lorem ipsum dolor</h4> 
 
      <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
     </div> 
 
    </div> 
 
    <div class="partner"> 
 
     <div class="partner__pic__wrap"> 
 
      <div class="partner__4__icon partner__icon"></div> 
 
      <a class="partner__4__pic partner__pic__hover" href="#"></a> 
 
     </div> 
 
     <div class="partner_wrap"> 
 
      <h4 class="partner__name">Lorem ipsum dolor</h4> 
 
      <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer</p> 
 
     </div> 
 
    </div> 
 
    <div class="partner"> 
 
     <div class="partner__pic__wrap"> 
 
      <div class="partner__4__icon partner__icon"></div> 
 
      <a class="partner__4__pic partner__pic__hover" href="#"></a> 
 
     </div> 
 
     <div class="partner_wrap"> 
 
      <h4 class="partner__name">Lorem ipsum dolor</h4> 
 
      <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer</p> 
 
     </div> 
 
    </div> 
 
    <div class="partner"> 
 
     <div class="partner__pic__wrap"> 
 
      <div class="partner__4__icon partner__icon"></div> 
 
      <a class="partner__4__pic partner__pic__hover" href="#"></a> 
 
     </div> 
 
     <div class="partner_wrap"> 
 
      <h4 class="partner__name">Lorem ipsum dolor</h4> 
 
      <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer</p> 
 
     </div> 
 
    </div> 
 
    <div class="partner"> 
 
     <div class="partner__pic__wrap"> 
 
      <div class="partner__4__icon partner__icon"></div> 
 
      <a class="partner__4__pic partner__pic__hover" href="#"></a> 
 
     </div> 
 
     <div class="partner_wrap"> 
 
      <h4 class="partner__name">Lorem ipsum dolor</h4> 
 
      <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer</p> 
 
     </div> 
 
    </div> 
 
    <div class="partner"> 
 
     <div class="partner__pic__wrap"> 
 
      <div class="partner__4__icon partner__icon"></div> 
 
      <a class="partner__4__pic partner__pic__hover" href="#"></a> 
 
     </div> 
 
     <div class="partner_wrap"> 
 
      <h4 class="partner__name">Lorem ipsum dolor</h4> 
 
      <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer</p> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

Проверьте с кодом выше один раз ....

источник

2015-10-01 13:29:31 Navatha

+0

Почему четвертая картина во втором ряду не выстроена вместе с другими тремя? – ASCIIThenANSI

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

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