I lifted Pacman and Space Invaders (henceforth, collectively called "object") from this website, and I'm trying to flow them one after the other in a straight line (randomly), but there are jumps currently.
How would I wrap each object (Pacman or Space Invader) in this case, and make them flow?
Here's what I have so far, along with float: left; on every object:
http://codepen.io/anon/pen/ijraw
(refresh to see alternative renders)
This is what I do want:
(all the DIVs flowing one after the other, one fluid line at a time)
This is what I don't want:
See the lone red Space Invader on line 2? I don't want that -- I want a line full of stuff.
PS there is too much code to post here. The Pacman and Space Invader objects aren't uniform, nor similar in any way, which is why I'm wondering if there's a way to wrap them with something more consistent.
Floating divs will find their place in the DOM flow. Your two images are different sizes so floating is actually doing it's job.
Simply change float : left to display : inline-block and it should work.
http://codepen.io/anon/pen/uapkL
Related
9 circles in a 3 x 3 grid with random lines on three of them connecting them to other circles (image)
I'm trying to more of less re-create the image above using react. The circles are div blocks and I have no clue how to go about drawing the lines that "connect" one circle to the other.
I tried using react-lineto, but it's simply not rendering anything when I use it. I can use the hr tag and use position absolute or something and just play around with where it's placed by toying with top and left props, but I don't think I'd be able to create diagonal lines.
Open to whatever packages or strategies you guys think could help me connect two dots (which are styled div blocks) with a line that could be vertical, horizontal, or diagonal.
Below is what I added to use react-lineto that didn't work. Straight from the documentation. I don't care to get react-lineto working as much as I just care to be able to accomplish this task in general.
<div className="A"></div>
<div className="B"><div/>
<LineTo from="A" to="B" />
This is the final result:
As you can see in the pic, each line in blue is separated by each element.
I want to try this, I have already designed the elements:
But I don't know how to put in the right place each line, here's a complete example:
https://codesandbox.io/s/stoic-pond-luh0l
The way I'm trying to solve this is with this line:
<FlowDivider style={{ left: 240 * index + 1 }} />
But I don't know what's the right operation for this problem... Thanks!
First of all, you should put styles in classess instead of style attribute.
Back to the question:
I have two ideas for that task.
Just separate icons from the descriptions. And it will be easy. Just use flex and combine icons and separators.
Set fixed width for the section with cards. Create section with separators outside of the static flow. Set the same width for separators section and use flex to set equal gaps. (assumption is that all cards has the same layout)
But i prefere to use first method. It's easier to resolve and manage.
P.S. If you ask just for math algorithm:
It's not that easy, because you have changeable card width. That's your constants which you need to include in your algorithm:
icon width: 50px, padding from both card sides: 30px. Variables which you need to include: gaps between cards(15-35px), cards width minus icon width(it's hard, because it's relative, and you don't have that information).
So to fulfill your idea you need to get card width, calculate distance between two icons, and than you will know how much space you need between separators. Soooo, i don't recommend that approach;)
I don't use grid lately, so i'm not able to give you easy answer with grid.
Is it possible to calculate if an element is at the start of a new line within a <p>? For example take a look at this screenshot:
You'll see that the Twitter button has a slight margin to it. This is fine when it's following a word, but I was wondering if there was a hidden CSS gem that'd allow me to say "if you're the first 'thing' on a line then lose your margin-left".
Edit: The answer was p button:first-child or p > button, but neither work. See the comments.
You might want to set the margin to 0 all the time and then make sure the button always has a space before it. (Edit: won't work either, since a space is not enough. Again, see the comments.)
It is possible to do this calculation programmatically using JavaScript, but I'm not aware of any CSS tricks that will do it for you.
The basic JavaScript algorithm for doing this is to append an invisible node to your document with the same text styling as your paragraphs of text. Then you gradually add text to it, checking its width after each addition to see where the linebreaks are. Then when you've worked out what the width of the final line is, you check to see if that width would put the twitter button on the next line by itself, and update the CSS styles appropriately to remove the margin. This needs to be done for each <p> on the page that includes a twitter button.
It's not the most straightforward approach (in fact, Mr. Lister's solution is far simpler and produces a comparable effect as long as the margin is not more than a few pixels wide), but it's not quite as bad as it sounds, either.
Here's an example:
http://jsfiddle.net/fBUnW/6/
What I wanted to do is that I had multiple tables and/or images of different heights and wanted them positioned on the page side by side, so that the tops of the objects were aligned.
I couldn't figure this out, it didn't matter whether I put these 'in-line' or in separate Boxes (Minipages) (that seemed to be aligned the way I wanted in the editor), in output Lyx always seemed to align these objects somehow around the center of their height and not the top.
Finally, (after several hours of googling and trying to figure this out) I have the answer, so I'm posting it below, because I hope someone like me will find it useful in the future.
The way I solved this is relatively easy.
For each image/table I created a Box (Minipage). In each Box I put, on the first line, Vertical Space (Insert -> Formatting -> Vertical Space) and set the size to 0 in. After the Vertical Space I inserted the graphic/table. This way, if you put several boxes next to each other (for example by setting their width to 25% page width, or whatever you desire), they will be aligned by the top in the output.
You can also do Ctrl+Space (to insert a 'protected space') and then Enter, which seems to work the exact same way.
Hope this helps.
If you go to my site: www.ryancoughlin.com - and if you see the Google, Yahoo, etc. RSS buttons on the right side of the page. I am trying to get them to align evenly, they are all the same image height and I have been trying to get them to evenly line up. But I have had no success.
Seems you are missing class="feed-image" on the Yahoo image.
Try to specify them as "inline" instead of block, this should allow you to treat them as words.
Another chance is to make a list (this seems appropriate since the nature of that "list" of images) and let the "li" elements float left (then adjust margins).
Also I think you should change your title in "Aligning images - vertically" to ease future users' search.