Difficulty making divs appear horizontally in a container

Hi Guys,

I am having a hard time making all the divs in a container appear horizontally. Here is my html code;

<div class="post-images-block">
                <div class="image-item">
                     <img class="post-crop-image" src="/image/source/file" alt="image"/>
                </div>

               <div class="image-item">
                     <img class="post-crop-image" src="/image/source/file" alt="image"/>
                </div>
                
                <div class="image-item add-more-pictures tooltipstered" title="Add more photos">
                    <i class="plus icon add-photo-icon"></i>
                </div>
           </div>

My Css;

.post-crop-image { width: 150px; height: 150px;}
.post-images-block { display: inline; /** white-space: nowrap; **/ }
.image-item {
    display: inline;
    white-space: nowrap;
}

.image-item:not(:nth-child(1)) {
    /*margin-left: 5px;*/
}

.add-more-pictures {
    border: 2px dashed #dddfe2;
    border-radius: 2px;
    box-sizing: border-box;
    /*display: inline-block;*/
    height: 150px;
    position: relative;
    width: 150px;
    /*padding: 75px auto;*/
    cursor: pointer;
    /*display: flex;*/
    align-items: center;
    justify-content: center
}

.add-photo-icon { font-size: 2em !important; cursor: pointer; }

The actual result I am getting;

Expected result;

Hi,

Seems like the divs line up already, or am I misunderstanding the problem?

I think there is more code relevant to your question.

Please post at least all code represented in the screenshot.

Did you mean something like this?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.post-crop-image {
	width: 150px;
	height: 150px;
}
.post-images-block {
	display: inline-block;
}
.image-item {
	display: inline-block;
	vertical-align:middle;
	white-space: nowrap;
}
.image-item img {
	display:block
}
 .image-item:not(:nth-child(1)) {
/*margin-left: 5px;*/
}
.add-more-pictures {
	border: 2px dashed #dddfe2;
	border-radius: 2px;
	box-sizing: border-box;
	display: inline-block;
	height: 150px;
	position: relative;
	width: 150px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center
}
.add-photo-icon {
	font-size: 2em !important;
	cursor: pointer;
	margin:auto;
}
</style>
</head>

<body>
<div class="post-images-block">
  <div class="image-item"> <img class="post-crop-image" src="/image/source/file" alt="image"/> </div>
  <div class="image-item"> <img class="post-crop-image" src="/image/source/file" alt="image"/> </div>
  <div class="image-item add-more-pictures tooltipstered" title="Add more photos"> <i class="plus icon add-photo-icon">+</i> </div>
</div>
</body>
</html>

The key things are the inline-block here:

.image-item {
	display: inline-block;
	vertical-align:middle;
	white-space: nowrap;
}

and the inline-flex here assuming you want vertical centering of the icon.

.add-more-pictures {
	border: 2px dashed #dddfe2;
	border-radius: 2px;
	box-sizing: border-box;
	display: inline-block;
	height: 150px;
	position: relative;
	width: 150px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center
}
2 Likes

Hi Paul, I see @Megafu_Anthony actually did post enough code to help him out.

I think he can have a virtual plus sign icon and remove the <i class="plus icon add-photo-icon"></i> element:


.add-photo-icon {
/*    font-size: 2em !important;
    cursor: pointer;
    margin:auto; */
    display:none;
}
.add-more-pictures::before{
    color:#999;
    font:900 2em monospace;
    content:"+";
}

EDIT)
Of course the <i> element could be important to keep, then maybe this is better:


.add-photo-icon {
    font-size: 2em !important;
    cursor: pointer;
    margin:auto;
/*    display:none; */
}
.add-photo-icon::before{
    color:#999;
    font:900 1em monospace;
    content:"+";
}
1 Like

Yes, although it wasn’t immediately obvious from the text/pictures what the problem was exactly as indeed items were horizontal to start with :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.