so I have this problem and I tried so many things and I don't understand what I'm doing wrong. I'm putting image between two texts.
but for some reason the way the text are shown is opposite from what i want.
I want the list to be in right side, and text in left. in the css I write float left\right in each section but it does the opposite. what am I missing?
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
img {
max-width: 200px;
max-height: 200px;
vertical-align: middle;
float: initial;
}
p {
float: left;
display: inline-block;
}
ol {
float: right;
display: inline-block;
}<div class="container">
<ol dir="rtl">
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
<a href="https://www.imdb.com/title/tt0944947/">
<img src="https://m.media-amazon.com/images/M/MV5BYTRiNDQwYzAtMzVlZS00NTI5LWJjYjUtMzkwNTUzMWMxZTllXkEyXkFqcGdeQXVyNDIzMzcwNjc@._V1_.jpg" alt="Game of Thrones" />
</a>
<p>
<h2>
some text just to see if this works.
</h2>
</p>
</div>
CodePudding user response：
In a left-to-right layout, the first HTML element will appear on the far left, the second to its right, etc. Since you do have a left-to-right layout, the ol will be placed on the left, the img in the middle, and the p on the right. To reverse order, you should simply reverse the order of the elements in the HTML, so that the p is first, then the img, and only then the ol.
<div class="container">
<p>
<h2>
some text just to see if this works.
</h2>
</p>
<a href=" https://www.imdb.com/title/tt0944947/">
<img src="GAMEOFTHRONES.jpg" alt="Game of Thrones" />
</a>
<ol dir="rtl">
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
</div>
Note that your code has many issues (which are not related to the question so I am not addressing them here). I would recommend you to post it at Code Review.
CodePudding user response：
Easiest way is to switch the sides in html, as you can see below:
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
img {
max-width: 200px;
max-height: 200px;
vertical-align: middle;
float: initial;
}
p {
float: left;
display: inline-block;
}
ol {
float: right;
display: inline-block;
}<div class="container">
<p>
<h2>
some text just to see if this works.
</h2>
</p>
<a href=" https://www.imdb.com/title/tt0944947/">
<img src="GAMEOFTHRONES.jpg" alt="Game of Thrones" />
</a>
<ol dir="rtl">
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
</div>With CSS it's harder, but can be achieved:
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
img {
max-width: 200px;
max-height: 200px;
vertical-align: middle;
float: initial;
}
p {
float: left;
display: inline-block;
}
ol {
float: right;
display: inline-block;
}
/*the followiing arranges the 3 as you desire*/
.container { display: flex; flex-direction: column; }
a { order: 2; }
p { order: 1; }
ol { order: 3; }<div class="container">
<ol dir="rtl">
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
<a href="https://www.imdb.com/title/tt0944947/">
<img src="https://m.media-amazon.com/images/M/MV5BYTRiNDQwYzAtMzVlZS00NTI5LWJjYjUtMzkwNTUzMWMxZTllXkEyXkFqcGdeQXVyNDIzMzcwNjc@._V1_.jpg" alt="Game of Thrones" />
</a>
<p>
<h2>
some text just to see if this works.
</h2>
</p>
</div>CodePudding user response：
You're trying to mix multiple layout methods together, and they're conflicting with one another.
If you want to use float, do not put flex on the container. Header elements are display:block so you'd need to override its layout as well so it doesn't take full screen width (in this example I removed the unnecessary <p> and floated the <h2> instead.) Unfloated elements (the header) have to come after the floated ones if you want them to fall into the same row, so for this method we have to change the order of the HTML. (But note this will only work if there's enough horizontal space for all three elements; if not the un-floated element will wrap to the next row.)
img {
width: 200px;
height: 200px;
}
h2 {
float: left;
display: inline-block;
}
ol {
float: right;
}<div class="container">
<ol dir="rtl">
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
<h2>
some text just to see if this works.
</h2>
<a href="https://www.imdb.com/title/tt0944947/">
<img src="GAMEOFTHRONES.jpg" alt="Game of Thrones" />
</a>
</div>Alternatively, if you want to use flex, do not use float. In this case you want the elements to go in right to left order; this can be done easily using flex-direction if you want to preserve the existing order of your HTML (which, given that you're using rtl text, seems likely to be what you want.)
.container {
display: flex;
flex-direction: row-reverse;
}
img {
width: 200px;
height: 200px;
}<div class="container">
<ol dir="rtl">
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
<a href="https://www.imdb.com/title/tt0944947/">
<img src="GAMEOFTHRONES.jpg" alt="Game of Thrones" />
</a>
<h2>
some text just to see if this works.
</h2>
</div>In general, when writing CSS, the fewer rules you add the better. It's really easy to start piling new rules on top of the old ones and wind up with weird conflicts like you were running into; it's often easier to get where you want to go by removing rules instead of adding more.
CodePudding user response：
This will fix your problem:
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
img {
max-width: 200px;
max-height: 200px;
vertical-align: middle;
float: initial;
}
p {
float: left;
display: inline-block;
width: 40px; /* fixed Spacing */
}
ol {
float: right;
display: inline-block;
width: 80px; /* fixed Spacing */
}<div class="container">
<!-- Flipped the p element and ol element to have them be on the sides that you wanted them to be on. -->
<p>
<h2>
some text just to see if this works.
</h2>
</p>
<a href="https://www.imdb.com/title/tt0944947/">
<img src="https://m.media-amazon.com/images/M/MV5BYTRiNDQwYzAtMzVlZS00NTI5LWJjYjUtMzkwNTUzMWMxZTllXkEyXkFqcGdeQXVyNDIzMzcwNjc@._V1_.jpg" alt="Game of Thrones" />
</a>
<ol dir="rtl">
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
</div>