need some help. How to fix bug with .half-img2{ margin-top: 10px; }
http://prntscr.com/94uqok
These 2 imgs height must be equal to main-img
http://plnkr.co/edit/Dvj5HfG6hJqvYPxr0ljJ?p=preview
Html:
<style type="text/css">
.test{
display: flex;
}
.test>div{
flex: 1;
}
.test .main-img{
flex-grow: 2;
}
img{
width: 100%;
}
.half-img{
margin-left: 10px;
}
.half-img2{
margin-top: 10px;
}
</style>
<div class="test">
<div class="main-img">
<img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
</div>
<div class="half-img">
<div class="half-img1">
<img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
</div>
<div class="half-img2">
<img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
</div>
</div>
</div>
I'll ignore the images sizes as these are not really relevant to the div layout issue.
A judicious use of margins and flex-column div layout seems to be required.
Layout would be something like this.
* {
box-sizing: border-box;
}
.test {
display: flex;
width: 80%;
margin: 1em auto;
border:1px solid green;
}
img {
display: block;
}
.test div {
}
.main-img {
flex:2;
margin-right: 10px;
background: lightblue;
}
.half-img {
display: flex;
flex-direction: column;
height: 250px;
}
.half-img {
flex:1;
display: flex;
flex-direction: column;
}
.half-img div {
flex:1;
background: lightblue;
}
.half-img1 {
margin-bottom: 5px;
}
.half-img2 {
margin-top: 5px;
}
<div class="test">
<div class="main-img">
</div>
<div class="half-img">
<div class="half-img1">
</div>
<div class="half-img2">
</div>
</div>
</div>
Related
I'm trying to center two buttons within the center of their parent element. The problem is that the first element has content in the beginning and end, which causes flex to center to that, messing up the alignment of the whole.
#container {
background-color: green;
width: 100%;
}
#d1 {
height: 50px;
display: flex;
}
#d2 {
background-color: blue;
width: 50px;
height: 50px;
}
#d3 {
background-color: red;
}
<div id="container">
<div id="d1">
<p>This is some text</p>
<input type="button">
<div id="d2"></div>
</div>
<div id="d3">
<input type="button">
</div>
</div>
Add a display: flex property on #container
#container {
background-color: green;
width: 100%;
display:flex
}
#d1 {
height: 50px;
display: flex;
}
#d2 {
background-color: blue;
width: 50px;
height: 50px;
}
#d3 {
background-color: red;
}
<div id="container">
<div id="d1">
<p>This is some text</p>
<input type="button">
<div id="d2"></div>
</div>
<div id="d3">
<input type="button">
</div>
</div>
You need justify-content: center; along with display:flex; on parent div.
#container {
background-color: green;
width: 100%;
display: flex;
justify-content: center;
}
#d1 {
height: 50px;
display: flex;
}
#d2 {
background-color: blue;
width: 50px;
height: 50px;
display: flex;
}
#d3 {
background-color: red;
}
<div id="container">
<div id="d1">
<p>This is some text</p>
<input type="button">
<div id="d2"></div>
</div>
<div id="d3">
<input type="button">
</div>
</div>
I don't know how much this code will be help you. Just try to give it more better view so that you can control the alignment properly along with button height and width. Just hope it helps you.
#container {
background-color: green;
width: 100%;
display: flex;
}
#d1 {
width: 33.33%;
display: flex;
padding: 0 10px 0 10px
}
#d2 {
width: 33.33%;
display: flex;
padding: 0 10px 0 10px text-align:center;
}
#d3 {
width: 33.33%;
display: flex;
padding: 0 10px 0 10px
}
#d2>input {
background-color: blue;
width: 100%;
vertical-align: middle;
}
#d3>input {
background-color: red;
vertical-align: middle;
width: 100%;
padding: 0 10px 0 10px
}
<div id="container">
<div id="d1">
<p>This is some text</p>
</div>
<div id="d2"><input type="button"></div>
<div id="d3">
<input type="button">
</div>
</div>
I am trying to create div which serves as my menu selection of my website. I want it to put into the center of my parent div. I did a lot of experiment but none of it work. Below is my CSS Code
.cell {
color: white;
font-size: .8rem;
padding: 1rem;
}
.lt-main-menu {
grid-area: main-menu;
background: deepskyblue;
height: 80vh;
}
.lt-menu{
background: black;
width: 100px;
height: 100px;
display: inline-block;
margin: 0 auto;
vertical-align:middle;
text-align:center;
/*
display:table-cell;
vertical-align:middle;
text-align:center;
*/
}
and this is my html file
<div class="cell lt-main-menu">
<div class="lt-menu">
menu 1
</div>
<div class="lt-menu">
menu 2
</div>
<div class="lt-menu">
menu 3
</div>
...
</div>
What i want is similar to picture below.
Hi i have created a pen in the CodePen app.
Using Flex you can easily center vertically and horizontally.
.lt-main-menu {
/*...*/
display:flex;
justify-content: center;
align-items: center;
}
This is the pen https://codepen.io/alessandroinfo/pen/JQPrYm
Try something like that, using flex properties:
<style type="text/css">
.cell {
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.lt-menu {
margin: 10px 0;
}
</style>
<div class="cell lt-main-menu">
<div class="cell-wrapper">
<div class="lt-menu">menu 1</div>
<div class="lt-menu">menu 2</div>
<div class="lt-menu">menu 3</div>
</div>
</div>
Try using display: flex to align items. This is a sample code. Hope this helps
HTML
<div class="d-flex flex-row align-items-start m-2">
<div class="container-block">
</div>
<div class="container-block">
</div>
<div class="container-block">
</div>
<div class="container-block">
</div>
</div>
<div class="d-flex flex-row align-items-center justify-content-center m-2">
<div class="container-block">
</div>
<div class="container-block">
</div>
<div class="container-block">
</div>
<div class="container-block">
</div>
</div>
CSS
.d-flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.align-items-start {
align-items: flex-start;
}
.align-items-center {
align-items: center;
}
.justify-content-center {
justify-content: center;
}
.container-block {
width: 100px;
height: 100px;
background: black;
margin: 0 5px;
}
.m-2 {
margin: 0.5rem;
}
JS Fiddle Link : https://jsfiddle.net/SJ_KIllshot/dbguqy6w/
This will do the job. I always find flexbox to work best for aligning things like this.
.cell {
color: white;
font-size: .8rem;
padding: 1rem;
}
.lt-main-menu {
width: 100%;
background: deepskyblue;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.lt-menu {
background: black;
width: 100px;
height: 100px;
margin: 0 10px;
text-align: center;
display: inline-block;
}
Demo: https://jsfiddle.net/trethewey/qs1kvuf5/16/
Try this.
.cell {
position: relative;
color: white;
font-size: .8rem;
padding: 1rem;
}
.box-containers {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.lt-main-menu {
grid-area: main-menu;
background: deepskyblue;
height: 80vh;
}
.lt-menu{
background: black;
width: 100px;
height: 100px;
display: inline-block;
margin: 0 auto;
vertical-align:middle;
text-align:center;
/*
display:table-cell;
vertical-align:middle;
text-align:center;
*/
}
<div class="cell lt-main-menu">
<div class="box-containers">
<div class="lt-menu">
menu 1
</div>
<div class="lt-menu">
menu 2
</div>
<div class="lt-menu">
menu 3
</div>
</div>
</div>
You can also have some other references HERE.
I have following slider:
I have issues with filling content inside of div. In this case in yellow div we can see button "Kempe2". I used break line (br) to put it in new line. When I use bootstrap:
<div class="row">
<button>Kempe2<button>
</div>
button disappears below and it is hideen. This is the flex, and I don't know how to use it.
This works:
<div class="panes" [#slide]="activePane">
<div firstPane>Hi
<br>Kempe
<br>
<button>Kempe2</button>
</div>
<div secondPane>2</div>
<div thirdPane>3</div>
<div fourthPane>4</div>
</div>
This doesn't work:
<div class="panes" [#slide]="activePane">
<div firstPane>Hi
<br>Kempe
<br>
<div class="row">
<button>Kempe2</button></div>
</div>
<div secondPane>2</div>
<div thirdPane>3</div>
<div fourthPane>4</div>
</div>
Here, button disappears and is probably pushed to bottom:
How can I use flex to put rows with bootstrap?
CSS:
:host {
display: block;
overflow: hidden;
}
.panes {
height: 100%;
width: 400%;
display: flex;
align-items: center;
}
.panes div {
flex: 1;
height:100%;
}
[firstPane] {
background-color: #FFF897;
width:100%;
}
[secondPane] {
background-color: #6CE6CB;
width:100%;
}
[thirdPane] {
background-color: brown;
width:100%;
}
[fourthPane] {
background-color: purple;
width:100%;
}
button {
font-size: 24px;
margin-top: 16px;
}
slide-panel {
/* max-width: 500px; */
height: 450px;
}
slide-panel div {
font: 20px sans-serif;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
slide-panel .panes {
border: 6px dashed #4990E2;
/* box-sizing: border-box; */
}
I have a series of flexbox items that contain an image and content. I'd like to alternate which side of the flexbox item the image appears (i.e., the left side of the box in one, the right side in the next). I can't seem to get it to work. Any suggestions are appreciated!
CSS
.offerings {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
}
.offeringsItem {
width: 90%;
height: auto;
margin: 10px;
padding: 15px;
border: 2px solid #dedede;
}
.offeringsContent {
margin: 10px;
position: relative;
}
.offeringsImg {
margin: 10px;
float: left;
}
.offeringsImg img {
max-width: 100%;
height: auto;
display: block;
}
.offeringsImg:nth-of-type(odd) img {
float: right;
}
.offeringsImg:nth-of-type(even) img {
float: left;
}
HTML
<div class="offerings">
<div class="offeringsItem">
<div class="offeringsImg">
<img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
</div>
<div class="offeringsContent">
Hi.
</div>
</div>
<div class="offeringsItem">
<div class="offeringsImg">
<img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
</div>
</div>
If you are about using flex, i believe using it on .offeringsItem is plenty enough. and flex-flow:row-reverse will do the job.
.offeringsItem {
display: flex;
flex-wrap: wrap;
margin: 10px;
padding: 15px;
border: 2px solid #dedede;
}
.offeringsItem:nth-of-type(odd) {
flex-flow: row-reverse;
}
.offeringsContent,
.offeringsImg {
margin: 10px;
}
.offeringsContent {
flex: 1;
}
.offeringsImg img {
max-width: 100%;
}
<div class="offerings">
<div class="offeringsItem">
<div class="offeringsImg">
<img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
</div>
<div class="offeringsContent">
Hi.
</div>
</div>
<div class="offeringsItem">
<div class="offeringsImg">
<img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
</div>
<div class="offeringsContent">
Hi.
</div>
</div>
</div>
I 'have removed some styles that did not seem necessary, it also makes the CSS update easier to read ;)
Do you want something like this?
The CSS class should be corrected to.
.offeringsItem:nth-of-type(odd) img {
float: right;
}
.offeringsItem:nth-of-type(even) img {
float: left;
}
Instead of applying on the div with the class offeringsImg, you need to apply the nth-of-type() selecor to the div with the class offeringsItem because only these elements have a common parent and the index will be taken properly, before they had separate parents hence it did not work!, One more correction is that you had missed the final closing div in the HTML.
.offerings {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
}
.offeringsItem {
width: 90%;
height: auto;
margin: 10px;
padding: 15px;
border: 2px solid #dedede;
}
.offeringsContent {
margin: 10px;
position: relative;
}
.offeringsImg {
margin: 10px;
}
.offeringsImg img {
max-width: 100%;
height: auto;
display: block;
}
.offeringsItem:nth-of-type(odd) img {
float: right;
}
.offeringsItem:nth-of-type(even) img {
float: left;
}
<div class="offerings">
<div class="offeringsItem">
<div class="offeringsImg">
<img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
</div>
<div class="offeringsContent">
Hi.
</div>
</div>
<div class="offeringsItem">
<div class="offeringsImg">
<img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
</div>
</div>
<div class="offeringsItem">
<div class="offeringsImg">
<img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
</div>
</div>
</div>
Instead of using float, try using margin-left: auto and margin-right: auto on the boxes with your images
How do I place two div's side by side and the third one below them? Like this:
My Current code is like below:
HTML:
<div id="container">
<div class="div-1">div1</div>
<div class="div-2">div2</div>
<div class="div-3">div3</div>
</div>
CSS:
#container {
position: absolute;
}
.div-1 {
float: left;
width: 45%;
padding: 2%;
}
.div-2 {
clear: both;
}
.div-3 {
float: right;
width: 45%;
padding: 2%;
}
You can use Flexbox
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#container div {
padding: 20px;
border: 1px solid black;
margin: 10px;
}
.div-1, .div-3 {
flex: 1 1 0;
}
.div-2 {
flex: 100%;
order: 3;
}
<div id="container">
<div class="div-1">Div 1</div>
<div class="div-2">Div 2</div>
<div class="div-3">Div 3</div>
</div>