在下一行对齐div元素

时间：2015-10-01 12:02:05

标签： html css

我需要的是一个图片网格。四张照片的第一行看起来很棒。但我无法找到安排第二行的解决方案。好吧，我知道我可以使用ul li和display：inline-block和vertical-align：text-top;但我想要div解决方案。 谢谢。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

对于所有8个街区，你需要给出固定的高度而不是100％。

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

答案 1 :(得分：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

答案 2 :(得分：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

答案 3 :(得分：0)

.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
{
	float: left;
	height: 100%;
	position: relative;
	margin-left:10px;
	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__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__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>

检查上面的代码一次......

相关问题
最新问题