I have a website where users can post and the top 3 posts are showing in my MOST LIKED section. I style just one div because the script automatically adds rest of the divs when the post is stored in a most liked section, but they're showing in a vertical way, and I want them to be horizontal. I'll first share my index.php/html code and then my css.
Index
var list2 = $("<div class='testimonial-area spmostliked bg1'><div class='container' id='mostliked'><div class='section-title white'><h2>Most Liked Regrets</h2>");
var count = 1;
for (var t = 0; (t < data.length); t++)
{
var comment = data[t];
if(comment['parent_comment_id'] == '0'){
var commentId = comment['comment_id'];
var out = $('<li>').html('<figure class="snip1167"><img src="https://images.freecreatives.com/wp-content/uploads/2016/03/22054222/Flat-Wings-Logo-Design.jpg" alt="sq-sample17"/><blockquote>' + comment['comment'] + '</blockquote><div class="author"><h5>First Name <span> $DATE</span></h5></div></figure>');
list2.append(out);
count++;
}
if(count > 3){
break;
}
}
$("#output2").html(list2);
CSS
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
figure.snip1167 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 310px;
width: 100%;
color: #333;
text-align: left;
box-shadow: none !important;
}
figure.snip1167 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure.snip1167 img {
max-width: 100%;
height: 100px;
width: 100px;
border-radius: 50%;
margin: 0 auto;
display: block;
z-index: 1;
position: relative;
}
figure.snip1167 blockquote {
margin: 0;
display: block;
border-radius: 8px;
position: relative;
background-color: #fafafa;
padding: 65px 50px 30px 50px;
font-size: 1em;
font-weight: 500;
margin: -50px 0 0;
line-height: 1.6em;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1167 blockquote:before,
figure.snip1167 blockquote:after {
font-family: 'FontAwesome';
content: "\201C";
position: absolute;
font-size: 50px;
opacity: 0.3;
font-style: normal;
}
figure.snip1167 blockquote:before {
top: 70px;
left: 20px;
}
figure.snip1167 blockquote:after {
content: "\201D";
right: 20px;
bottom: 0;
}
figure.snip1167 .author {
padding: 15px;
margin: 0;
color: #ffffff;
text-align: right;
}
figure.snip1167 .author h5 {
opacity: 0.8;
margin: 0;
font-weight: 800;
color: white;
}
figure.snip1167 .author h5 span {
font-weight: 400;
text-transform: none;
display: block;
color: white;
}
So, how can I make my divs appear in a horizontal way? Thanks in advice!
You could add the divs automatically inside a container with display:flex, as David787 said, this should fix it, if not, maybe we are not understanding your problem. In that case, can you try to explain it in another way?
@Zli I am so glad that worked for you :D . The display:flex will affect only the direct children of the div.
<div class="father">
<div class="child">
<div class="not-a-direct-child"></div>
</div>
<div class="child">
<div class="not-a-direct-child"></div>
</div>
<div class="child">
<div class="not-a-direct-child"></div>
</div>
</div>
In this case will affect the divs with the class "child", not the divs with the class "not-a-direct-child". So, if your text is a direct child like in the next case:
<div class="father">
<h2 class="child-too">
<div class="child">
<div class="not-a-direct-child"></div>
</div>
<h2 class="child-too">
<div class="child">
<div class="not-a-direct-child"></div>
</div>
<h2 class="child-too">
<div class="child">
<div class="not-a-direct-child"></div>
</div>
</div>
You can align or justify that item (your text) with some properties or just putting the text and the divs inside a container:
<div class="father">
<div class="child">
<h2 class="not-a-direct-child>
<div class="not-a-direct-child"></div>
</div>
<div class="child">
<h2 class="not-a-direct-child>
<div class="not-a-direct-child"></div>
</div>
<div class="child">
<h2 class="not-a-direct-child>
<div class="not-a-direct-child"></div>
</div>
</div>
I really recommend you to play this game flexbox froggy and I am sure you will understand how to use flexbox as an expert and to solve a lot of things.
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加