I have a problem.
I would like make a pdf, but I can not to make a simple flex and items-center on different height divs.
<div style="margin-top: 20px; align-items: center">
<div style="width: 70%; display: inline-block; text-align: right">Client: </div>
<div style="width: 25%; display: inline-block; font-size: x-large" >Company shorted name</div>
</div>
Okay, your problem is not really related to either Laravel nor DomPdf (Will adjust your tags :-)).
This is however how you get the 2 elements centered; The center is exactly between the 2 child DIVs, so you might want to adjust that with giving them a certain size, istead of auto.
<div style="margin-top: 20px; display: flex; justify-content: center;flex-direction: unset;width: 100%;align-items: center;">
<div style="flex: 1;display: inline-block;text-align: right;">Client: </div>
<div style="flex: 1;display: inline-block;font-size: x-large;">Company shorted name</div>
</div>
As reference you should have a look at this article https://love2dev.com/blog/absolute-centering-css/
Related
How do this ? I would like to create div with inline flex and when user change resolution, this div change display to block. I try many ways but I don't know why its didn't work.
<div
style="text-align: center; display: flex; flex-direction: row; justify-content: center; align-items: center; height: 400px;">
<div style="">
<img style="text-align: center;" src="laptop.png">
<p>logo</p>
</div>
<div style="margin-left: 120px; margin-right: 120px;">
<img src="laptop.png">
<p>logo</p>
</div>
<div style="">
<img src="laptop.png">
<p>logo</p>
</div>
</div>
codepen.io/Remax166/pen/EXomZK
Thanks for help :) !
I am making a site that will have three cards and to create them I'm using flex box. I am using justify-content: space-between which works perfectly when the three columns are all on the same row, as their margins are perfect with the container, and the space in-between them is great.
However, when the columns wrap, the column that is now on the new row is at the same left margin as the first, which is expected with space-between, but in my scenario, space-around's wrap behavior would look much better, as I have and odd number of cards.
Is there a way for me to get space-between's outer margin alignment with space-around's wrapping behavior?
Here is a codepen that gives a quick example of what I have now.
https://codepen.io/anon/pen/xdrpEo
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: spacing-between;
}
.file-links-flex-container {
max-width: 400px;
flex-grow: 1;
background-color: red;
}
.container-content {
justify-content: flex-start;
padding: 0 30px;
max-height: 600px;
}
<div class="flex-row space-around">
<div class="file-links-flex-container col">
<div class="container-header">
<h5>A</h5>
</div>
<div class="container-content">
<p>I AM TEST CONTENT!</P>
</div>
</div>
<div class="file-links-flex-container col">
<div class="container-header">
<h5>B</h5>
</div>
<div class="container-content">
<p>I AM TEST CONTENT!</P>
</div>
</div>
<div class="file-links-flex-container col">
<div class="container-header">
<h5>C</h5>
</div>
<div class="container-content">
<p>I AM TEST CONTENT!</P>
</div>
</div>
</div>
Try adding margin: 0 auto, You get that.
.file-links-flex-container{
margin: 0 auto;
}
I think this one helped you. :)
Even you can solve this one using justify-content:center; but margin will be the good one.
I have some slides where I'm trying to equally space content using display: flex but it's adding a large empty area below my content and above the navigation.
When the screen shrinks to the mobile size the empty area becomes much more apparent.
I have no idea why it's doing this, or why switching display: flex to display:table messes things up even more.
After spending two days I've come for some guidance.
Here's a test link to what I have. Click on 1 - 4 to get to a screen using flex.
<div class="slide" id="slide-one" data-slide="1">
<p class="deck">You don’t have to wait until bad weather is imminent to prepare for a power outage. Take some time to get organized with these tips.</p>
<div class="row">
<div class="section" id="emergency-kit">
<div class="rollover center">
<div class="button-container">
<div class="button"></div>
</div>
<div class="text">Create an Emergency Kit</div>
</div>
<div class="container">
<img src="img/emergency-kit.png" alt="" />
</div>
</div>
<div class="section" id="food-prep">
<div class="rollover center">
<div class="button-container">
<div class="button"></div>
</div>
<div class="text">Prep Your Food</div>
</div>
<div class="container">
<img src="img/fridge.png" alt="" />
</div>
</div>
</div>
</div>
.row {
display: flex;
width:100%;
flex-direction: row;
margin-top: 20px;
}
#emergency-kit {
width:40%;
display: inline-block;
.container {
max-width: 263px;
}
}
#food-prep {
width:40%;
display: inline-block;
.container {
max-width: 167px;
}
}
Also, using flexslider for the slideshow animations.
The source of the gap has nothing to do with flexbox. Your flex container (.row) is nested within a larger container.
div.row
... is a descendant of div.flex-viewport
... which takes up all the height to the bottom navbar.
On the smaller screen, div.row isn't even a flex container anymore. It's switched to a block element:
Possible options for closing the gap:
Reduce the height of one of the containers
Define heights for all container elements between .flex-viewport and .row
Apply display: flex to all containers, so children can expand the full height of their parent
I have 2 threads in an imageboard stacked on top of each other, each thread has some text and an image file.
I want images to be always on right of the thread, instead of being on top of reply button.
When I float image to right by float: right; the images keep stacking on top of each other instead and form a branch like structure
How do I force images with post-image class to not break <div> structure of following thread and stay on right of screen?
<div class="you" id="thread_27" data-board="b" align="Right">
<div class="files">
<div class="file">
<p class="fileinfo">File: 1454704253855.jpg <span class="unimportant">(78.69 KB, 1024x768, <span class="postfilename">soft-color-background.jpg</span>)</span>
</p>
<img class="post-image" src="/b/thumb/1454704253855.png" style="width: 255px; height: 192px; max-width: 98%;" alt="">
</div>
</div>
<div class="post op" id="op_27">
<p class="intro">
<input class="delete" name="delete_27" id="delete_27" type="checkbox">
<label for="delete_27"><span class="name">Anonymous (You)</span>
<time data-local="true" datetime="2016-02-05T20:30:54Z">02/05/16 (Fri) 22:30:54</time>
</label> <a class="post_no" id="post_no_27" onclick="highlightReply(27)" href="/b/res/27.html#27">No.</a><a class="post_no" onclick="citeReply(27)" href="/b/res/27.html#q27">27</a>[Reply]</p>
<div class="body">xxxxxx2</div>
</div>
<br class="clear">
<hr>
</div>
<div class="you" id="thread_26" data-board="b" align="Right">
<div class="files">
<div class="file">
<p class="fileinfo">File: 1454704190918.jpg <span class="unimportant">(157.33 KB, 1024x768, <span class="postfilename" title="mac-style-presentation-background.jpg">mac-style-presentation-bac….jpg</span>)</span>
</p>
<img class="post-image" src="/b/thumb/1454704190918.png" style="width: 255px; height: 192px; max-width: 98%;" alt="">
</div>
</div>
<div class="post op" id="op_26">
<p class="intro">
<input class="delete" name="delete_26" id="delete_26" type="checkbox">
<label for="delete_26"><span class="name">Anonymous (You)</span>
<time data-local="true" datetime="2016-02-05T20:29:51Z">02/05/16 (Fri) 22:29:51</time>
</label> <a class="post_no" id="post_no_26" onclick="highlightReply(26)" href="/b/res/26.html#26">No.</a><a class="post_no" onclick="citeReply(26)" href="/b/res/26.html#q26">26</a>[Reply]</p>
<div class="body">xxxxx</div>
</div>
<br class="clear">
<hr>
</div>
when I add CSS
.post-image
{
float: right;
}
it breaks everything.
jsfiddle before
js fiddle after floating post-image to the right
This happens because of float left or right. clear controls the float behavior hence, the ideal way is to make all the float properties inside a container usually div. Sometimes, browser renders it differently so whenever coming to a new container or sibling, ideal way is to clear the float(if you don't need the floating property).
In your code you could probably
Add this:
.clear{
clear:both;
}
to better understand. Also don't forget to play with it to put it ideally where it is required.
If you can use flexbox (no way to old browsers) try something like:
.row{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
}
.col1{
position: relative;
flex: 1 1 100%;
align-self: stretch;
overflow: hidden;
}
.col2{
position: relative;
display: flex;
flex-direction: column;
flex: 0 1 45px;
align-self: stretch;
}
on a html strukture like
<div class="row">
<div class="col1">
</div>
<div class="col2">
</div>
</div>
Add one more div with "clear: both" styling will fix your problem.
<div class="file">
your code here...
<div style="clear:both"></div>
</div>
jsfiddle
how to make the second div properly align with the first div....
i gave display inline for horizontal alignment...
but the second div is still down...
i am talking with respect to 24 inch monitor....
http://jsfiddle.net/ke6Se/1/embedded/result/
<div style=" width: 300px; display: inline-block;">
<span style="color: #000; font-size: 12px; font-family: arial; font-wieght: bold; margin-left: 45px;">Mark Up</span><span style="margin-left: 110px;">10%</span>
<div>
<span style="margin-left: 45px;">Non-Tax Amount</span><span style="margin-left: 59px;">0</span>
</div>
</div>
first of all, as Kevin said in his comment, you're html is wrong. You have one div nested inside the other. Fix that and then apply inline-block to the second div
<div style=" width: 300px; display: inline-block;">
<span style="color: #000; font-size: 12px; font-family: arial; font-wieght: bold; margin-left: 45px;">Mark Up</span><span style="margin-left: 110px;">10%</span>
</div>
<div style="display:inline-block">
<span style="margin-left: 45px;">Non-Tax Amount</span><span style="margin-left: 59px;">0</span>
</div>
Here's the obligatory fiddle
Your fiddle is really busy and I can't find exactly where it is, but it has to do with your margins and widths. You should set a wrapper <div> to a fixed width then float: right the <div> you want and make sure the <div>s widths add up to the wrappers width, including margin and any padding. See this article for a good explination.
http://www.webdesignerdepot.com/2012/09/when-pages-are-not-paper-the-designers-guide-to-layout-code/
Also it might help to set a min width to prevent stacking of divs when the window is shrinked if you don't want to set a static width.
Here is a quick HTML mark up of what I'm talking about.
<div id="wrapper" style="width: 800px;">
<div id="leftDiv" style="width: 600px; float: left;">
I'm the left Div!
</div>
<div id="rightDiv" style="width: 200px; float: right;">
I'm the right Div!
</div>
</div>