CODEWITHSUNDEEP
htmlcss
m0a
m0a

Reputation: 1005

Reposition correctly using only CSS?

I'm trying to get these positioned like so:

enter image description here

https://jsfiddle.net/ut1mgcLb/

HTML

<div class="object1">
    <div class="snax-voting-container-body">
        <div class="snax-voting snax-voting-positive snax-voting-large" data-snax-item-id="297">
            <div class="snax-voting-score">
                <strong>6203</strong> points
            </div>
            <a href="#" class="snax-voting-upvote snax-vote snax-vote-up snax-guest-voting" title="Upvote" data-snax-item-id="297" data-snax-author-id="0" data-snax-nonce="6bb412040e"><span class="snax-vote-icon snax-vote-icon-caret"></span> Upvote</a>
            <a href="#" class="snax-voting-downvote snax-vote snax-vote-down snax-guest-voting" title="Downvote" data-snax-item-id="297" data-snax-author-id="0" data-snax-nonce="6bb412040e"><span class="snax-vote-icon snax-vote-icon-caret"></span> Downvote</a>
        </div>
    </div>
    <a href=" https://themeforest.net/item/bimber-viral-buzz-wordpress-theme/14493994 "><img id="postTB" src=" https://i.imgur.com/Nf57W2G.jpg"></a><a href=" https://themeforest.net/item/bimber-viral-buzz-wordpress-theme/14493994 "> 25 Delicious Things To Cook In September (themeforest.net)</a><img alt="" src="//www.gravatar.com/avatar/9f221658beaba2ee853f978fa48f49c2?s=40&amp;r=g&amp;d=retro" srcset="//www.gravatar.com/avatar/9f221658beaba2ee853f978fa48f49c2?s=40&amp;r=g&amp;d=retro 2x" class="avatar avatar-40 photo" height="40" width="40">
</div>

CSS

#postTB{
  width:10%;
}

Is there a way to reposition these correctly using only CSS, or do I need to start over with the HTML ordering?

Upvotes: 1

Views: 69

Answers (3)

s.kuznetsov
s.kuznetsov

Reputation: 15213

remade without display: contents

#postTB{
 width: 100%;
}

 .object1 {
   display: flex;
  }

 .object1 a {
   width: 10%;
  }

 .object1 a:last-of-type {
   width: auto;
  }

  .snax-voting {
   display: flex;
   flex-direction: column;
   text-align: center;
   }
<div class="object1">
    <div class="snax-voting-container-body">
        <div class="snax-voting snax-voting-positive snax-voting-large" data-snax-item-id="297">
            <div class="snax-voting-score">
                <strong>6203</strong> points
            </div>
            <a href="#" class="snax-voting-upvote snax-vote snax-vote-up snax-guest-voting" title="Upvote" data-snax-item-id="297" data-snax-author-id="0" data-snax-nonce="6bb412040e"><span class="snax-vote-icon snax-vote-icon-caret"></span> Upvote</a>
            <a href="#" class="snax-voting-downvote snax-vote snax-vote-down snax-guest-voting" title="Downvote" data-snax-item-id="297" data-snax-author-id="0" data-snax-nonce="6bb412040e"><span class="snax-vote-icon snax-vote-icon-caret"></span> Downvote</a>
        </div>
    </div>
    <a href=" https://themeforest.net/item/bimber-viral-buzz-wordpress-theme/14493994 "><img id="postTB" src=" https://i.imgur.com/Nf57W2G.jpg"></a><a href=" https://themeforest.net/item/bimber-viral-buzz-wordpress-theme/14493994 "> 25 Delicious Things To Cook In September (themeforest.net)</a><img alt="" src="//www.gravatar.com/avatar/9f221658beaba2ee853f978fa48f49c2?s=40&amp;r=g&amp;d=retro" srcset="//www.gravatar.com/avatar/9f221658beaba2ee853f978fa48f49c2?s=40&amp;r=g&amp;d=retro 2x" class="avatar avatar-40 photo" height="40" width="40">
</div>

#postTB{
  width:10%;
}

.object1 {
   display: flex;
}

.object1 a {
   display: contents;
}
<div class="object1">
    <div class="snax-voting-container-body">
        <div class="snax-voting snax-voting-positive snax-voting-large" data-snax-item-id="297">
            <div class="snax-voting-score">
                <strong>6203</strong> points
            </div>
            <a href="#" class="snax-voting-upvote snax-vote snax-vote-up snax-guest-voting" title="Upvote" data-snax-item-id="297" data-snax-author-id="0" data-snax-nonce="6bb412040e"><span class="snax-vote-icon snax-vote-icon-caret"></span> Upvote</a>
            <a href="#" class="snax-voting-downvote snax-vote snax-vote-down snax-guest-voting" title="Downvote" data-snax-item-id="297" data-snax-author-id="0" data-snax-nonce="6bb412040e"><span class="snax-vote-icon snax-vote-icon-caret"></span> Downvote</a>
        </div>
    </div>
    <a href=" https://themeforest.net/item/bimber-viral-buzz-wordpress-theme/14493994 "><img id="postTB" src=" https://i.imgur.com/Nf57W2G.jpg"></a><a href=" https://themeforest.net/item/bimber-viral-buzz-wordpress-theme/14493994 "> 25 Delicious Things To Cook In September (themeforest.net)</a><img alt="" src="//www.gravatar.com/avatar/9f221658beaba2ee853f978fa48f49c2?s=40&amp;r=g&amp;d=retro" srcset="//www.gravatar.com/avatar/9f221658beaba2ee853f978fa48f49c2?s=40&amp;r=g&amp;d=retro 2x" class="avatar avatar-40 photo" height="40" width="40">
</div>

Upvotes: 2

KALITA
KALITA

Reputation: 796

Add display: flex to your container and resize the image whatever you want

.object1{
display:flex;
}

codepen : https://codepen.io/the-wrong-guy/pen/VweEqXx?editors=1100

Upvotes: 1

Brookswift
Brookswift

Reputation: 112

Are you familiar with the css flexbox? My goto cheetsheet is here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You can specify ordering with flexbox, so you'd just do inline-flex, flex direction column, and then manually set the order ex:

.snax-voting-container-body {
  display: inline;
}

.snax-voting {
  display: inline-flex;
  flex-direction: column;
}
.snax-voting a {
  display: block;
}

.snax-voting-upvote {
  order: 0;
}
.snax-voting-score {
  order: 1;
}
.snax-voting-downvote {
  order: 2;
}

Upvotes: 1

Related Questions