I am learning VUE for the first time and want to make a page. Here I want to set two different colors connect at left and right on one page in same hight,but what I get is different, unless I add content to the right
I try to the position is relative and float is left and right, it is not worked
And I don't want to use gradient color and use ::before or ::after
<template>
<div class="a">
<div class="b">
<div class="v1">
<img src="../assets/v.png"/>
</div>
<div class="v2">
<img src="../assets/v.png"/>
</div>
<div class="v3">
<img src="../assets/v.png"/>
</div>
<div class="v4">
<img src="../assets/v.png"/>
</div>
</div>
<div class="c">
<div class="v5">
<img src="../assets/v.png"/>
</div>
<div class="v6">
<img src="../assets/v.png"/>
</div>
</div>
</div>
</template>
<style>
.a{
margin: 0%;
/* background: linear-gradient(top, red ,red 50%,blue 50%,blue); */
}
.b{
float: left;
background-color: antiquewhite;
width: 30%;
height: 100%;
}
.c{
float: left;
background-color:red;
width: 70%;
height: 100%;
}
</style>
enter image description here
you must set a display for .main like this:
.main{
display : flex;
}
Related
A site I inherited uses a sprite for some design based images. The sprite is 28px tall. Recently it began that when the site is viewed in Chrome, the sprite does not display on the elements when the height of the container with a background is > 28px.
I was able to reproduce this using the below snippet.
It's especially odd that if i create a narrower image, I don't have this problem. The break point seems to be width: 16384px or 2^14.
.outer {
width: 1000px;
background-color: skyblue;
}
.bg {
background: url('https://i.imgur.com/DEV7k42.png');
}
<div class='outer'>
<div class='bg'>
<div style='height:28px'>
See this nice background?
</div>
</div>
</div>
<div class='outer'>
<div class='bg'>
<div style='height: 29px;'>
No background here
</div>
</div>
</div>
This uses an image that is 16384px wide:
.outer {
width: 1000px;
background-color: blue;
}
.bg {
background: url('https://i.imgur.com/1vd6POs.png');
}
<div class='outer'>
<div class='bg'>
<div style='height: 29px;'>
this image is 13684px wide
</div>
</div>
</div>
This uses an image that is 16385px wide:
.outer {
width: 1000px;
background-color: blue;
}
.bg {
background: url('https://i.imgur.com/KV0uyia.png');
}
<div class='outer'>
<div class='bg'>
<div style='height: 29px;'>
This uses an image that is 16385px wide
</div>
</div>
</div>
Could this be a bug? I did a quick google search and could not find anything to indicate there is a hard limit on the dimensions of an image.
I simplified the structure and placed the bg image and color on the outer div. Seems to work:
.outer {
width: 1000px;
height: 28px;
background: url('https://i.imgur.com/DEV7k42.png');
background-color: skyblue;
}
<div class='outer'>
<div style='height:28px'>
See this nice background?
</div>
</div>
<div class='outer'>
<div style='height: 29px;'>
No background here
</div>
</div>
Is it possible to create a CSS rule that applies to the every element except for the first 8 elements? Ie, the 8th plus elements should have a margin top of 65px.
My below less code applies margins to every odd and even button within a menu. Now I want to add a specific margin to the 8th plus buttons. And then ideally apply a specific margin to the 16th plus buttons and so on.
.foo-menu {
.foo-menu-btn {
float: left;
margin: 1px;
}
// Apply specific margin to every second(even) button
.foo-menu-btn:nth-child(even) {
margin-left: -23px;
margin-top: 46px;
}
// Apply specific margin to every odd button
.foo-menu-btn:nth-child(odd) {
margin-left: -23px;
}
// For every button after the 8th one; apply a specific margin
.foo-menu-btn:nth-child( ??? ) {
margin-top: 65px;
}
}
<div class="foo-menu">
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<!-- Now every foo-menu-btn should have a top margin of 65px -->
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
</div>
Try below code, i think help full to you.
hr {
display: block; float: left;
width: 50px; height: 50px;
border: solid 2px #aaa; margin: 10px;
}
hr:nth-child(n+9):not(:nth-last-child(-n)) {
background-color: #ddd;
}
<div id=t>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
</div>
You can use the native CSS :nth-child pseudo-class to specify a range. According to the case you specified it might look like this:
div.foo-menu div.foo-menu-btn:nth-child(n+8):nth-child(-n+15) {
margin-left: 50px
}
The downside is that you still have to manually define each range.
To select everything other than the first 8 divs you can use .foo-menu-btn:nth-child(n+9). See it applied to your HTML below (I took out the negative margins so that the divs would be visible for this example):
.foo-menu-btn {
float: left;
margin: 1px;
background-color: #ccc;
height: 1rem;
}
.foo-menu-btn:nth-child(even) {
margin-top: 46px;
}
.foo-menu-btn:nth-child(n+9) {
margin-top: 65px;
}
<div class="foo-menu">
<div class="foo-menu-btn">1</div>
<div class="foo-menu-btn">2</div>
<div class="foo-menu-btn">3</div>
<div class="foo-menu-btn">4</div>
<div class="foo-menu-btn">5</div>
<div class="foo-menu-btn">6</div>
<div class="foo-menu-btn">7</div>
<div class="foo-menu-btn">8</div>
<!-- Now every foo-menu-btn should have a top margin of 65px -->
<div class="foo-menu-btn">9</div>
<div class="foo-menu-btn">10</div>
<div class="foo-menu-btn">11</div>
<div class="foo-menu-btn">12</div>
<div class="foo-menu-btn">13</div>
<div class="foo-menu-btn">14</div>
<div class="foo-menu-btn">15</div>
<div class="foo-menu-btn">16</div>
</div>
Use :
.foo-menu .foo-menu-btn:nth-child(n+9){
color: blue;
}
.foo-menu .foo-menu-btn:nth-child(odd){
color: red;
}
.foo-menu .foo-menu-btn:nth-child(even){
color: green;
}
.foo-menu .foo-menu-btn:nth-child(n+9){
color: blue;
}
<div class="foo-menu">
<div class="foo-menu-btn">1</div>
<div class="foo-menu-btn">2</div>
<div class="foo-menu-btn">3</div>
<div class="foo-menu-btn">4</div>
<div class="foo-menu-btn">5</div>
<div class="foo-menu-btn">6</div>
<div class="foo-menu-btn">7</div>
<div class="foo-menu-btn">8</div>
<!-- Now every foo-menu-btn should have a top margin of 65px -->
<div class="foo-menu-btn">9</div>
<div class="foo-menu-btn">10</div>
<div class="foo-menu-btn">11</div>
<div class="foo-menu-btn">12</div>
<div class="foo-menu-btn">13</div>
<div class="foo-menu-btn">14</div>
<div class="foo-menu-btn">15</div>
<div class="foo-menu-btn">16</div>
</div>
Im using Bootstrap in my application. I am trying to make it so my whole left side is #fff, while rest is #f9f9f9.
This is what I have so far.
HTML:
<div class="container">
<section class="content">
<div class="col-xs-8">
// Left side
</div>
<div class="col-xs-4">
// Right side side-bar
</div>
</section>
</div>
CSS:
. container {
width: 1200px !important;
}
PS: I don't want/need responsive design.
Image below is a example for what I want to achieve.
Here is a link that hast the same design.
Please try the following code:
HTML
<div class="container">
<section class="content">
<div class="col-xs-8 left-side">
// Left side
</div>
<div class="col-xs-4 side-bar">
// Right side side-bar
</div>
</section>
</div>
CSS
.container{
margin: 0;
padding: 0;
width: 100%
}
.content{
height: 100%;
width: 100%;
}
.left-side{
background-color: #fff;
min-height: 100%;
}
.side-bar{
background-color: #f9f9f9;
min-height: 100%;
}
.no-margin{
margin: 0;
padding: 0
}
This would be a way to achieve what you want to do.
.leftside {
background: #fff;
}
.rightside {
background: #f9f9f9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-8 leftside">
// Left side
</div>
<div class="col-xs-4 rightside">
// Right side side-bar
</div>
</div>
</div>
I created a Bootstrap 4 script here:
http://jsfiddle.net/aftu6ehL/
How is it possible to alternate left/right alignment of the boxes. I.e. I want to switch each second box the left and right side..
Description - Image
Image - Description
Description - Image
Image - Description
Description - Image
Image - Description
nth-child(3n+1) somehow didn't seem to work.
You want to use 2n + 1 (every odd value)
.container {
width: 200px;
}
.image, .desc{
width: 50%;
height: 50px;
display: inline-block;
}
.image {
background: red;
float: left;
}
.desc {
background: blue;
float: right;
}
.container:nth-child(2n + 1) .image {
float:right;
}
<div class="container">
<div class="image">
Image
</div>
<div class="desc">
Description
</div>
</div>
<div class="container">
<div class="image">
Image
</div>
<div class="desc">
Description
</div>
</div>
<div class="container">
<div class="image">
Image
</div>
<div class="desc">
Description
</div>
</div>
I've searched quite a bit looking for an explanation as to why this behavior is occurring.
Essentially I've setup 2 columns, each with a nav bar and content area.
CSS
#mainContainer {
background-color: lightblue;
width: 100%;
height: 300px;
}
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
}
#leftBar, #rightBar {
background-color: purple;
height: 10%;
}
#leftMain, #rightMain {
background-color: grey;
height: 90%;
}
HTML
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar"></div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
Whenever I add an element to the nav bar in only one column it shifts the entire column down.
http://jsfiddle.net/qn6rs0q2/3/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
But if I add another element to the other column they line up again.
http://jsfiddle.net/qn6rs0q2/5/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar">
<button>Test 2</button>
</div>
<div id="rightMain"></div>
</div>
</div>
To clarify, I'm not looking for a solution to fix this behavior. Rather I'm hoping someone can explain the underlying reason behind why it's behaving as it is. Thanks in advance.
It happens because the default vertical alignment of inline elements is the baseline. If you set the vertical alignment to top (or middle) for both sides, they line up as you want:
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
vertical-align:top;
}
jsFiddle example