css3

问题 I'm trying to center vertically the content with flex boxes without success. I don't like to use position or translate because it is not a fixed size. What is wrong with my code? .row-centered { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .col-centered { display: flex; flex-direction: column; align-self: flex-start; float: none; margin-right: 0 auto; } .us-container{ display: flex; justify-content: center; align-items: center; vertical-align: middle; resize

问题 I have a flex item that is also a flex container .sub-con , problem is the flex item of .sub-con is refusing to wrap, even after adding : flex-flow: row wrap . Can anyone fix this for me, or point out what I'm doing wrong. .container { display: flex; justify-content: center; align-items: center; flex-flow: row wrap; height: 100vh; } .sub-con { margin-right: 50px; margin-left: 50px; height: 500px; background-color: #fff; display: flex; justify-content: center; flex-flow: row wrap; } .col-one {

问题 I use a third-party component that occupies all the available space, i.e. width=100% and height=100% . I don't have control over it. I'm trying to fit it in the following layout, but its height=100% doesn't work (I expect the third-party component to occupy all the green space). Why? How would you fix that? .container { display: flex; flex-direction: column; width: 200px; height: 100px; } .header { display: flex; background-color: rgba(255, 0, 0, 0.5); } .content { flex-grow: 1; background

问题 p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } For the animation CSS code above, I'm wondering whether there's any way to pass the values of margin-left and width as parameter from Javascript. 回答1: Use CSS variables and you can easily do this: document.querySelector('.p2').style.setProperty('--m','100%'); document.querySelector('.p2').style.setProperty('--w','300%'); .p1,.p2 {

问题 The below fiddle has three blocks. block 1 contains three columns. The middle column has two rows within it, each set to flex:1. block 2 contains three columns. The middle column has two rows within it, each set to flex:1. The second row contains an image of a dog. The image will not shrink to the height of the row within which it is contained. block 3 contains only the middle column which has two rows within it, each set to flex:1. The second row contains an image of a dog. The image DOES

问题 How do I create a CSS shape in which each side is transformed separately. Something like the shape in the below image. Is that possible using CSS only without images? 回答1: I don't think there is any way in CSS to pick and transform each side separately but you can achieve the shape in question by using perspective transforms (pure CSS). Rotating the element with perspective along both X and Y axes sort of produces the effect of each side having a separate transformation. You can adjust the

问题 In today's web development community, It is almost 'standard practise' to make a website "fully responsive" - meaning it would work on all screen sizes. I currently have a website that is designed for a set width and height of 900 * 600px. However, I would like to alter this in such a way that I can make it mobile responsive, without loosing its functionality. I was looking for some 'industry standard' concepts in which I could adapt to this purpose, although I am at a slight loss as to how

问题 I created this border design in Photoshop and was wondering if anyone could give me some guidance with how to recreate this using css . 回答1: Creating an effect like this is definitely possible using CSS3 but you would need more than just the border for that. In the below sample, I have used a pseudo-element with a radial-gradient background to mimick the border effect shown in question. Depending on which side should have the border, you can tweak the positioning of the pseudo element to

问题 I need to fill the remaining vertical space of #wrapper under #first with #second div. I need an only CSS solution. #wrapper { width: 300px; height: 100%; } #first { width: 300px; height: 200px; background-color: #F5DEB3; } #second { width: 300px; height: 100%; background-color: #9ACD32; } <div id="wrapper"> <div id="first"></div> <div id="second"></div> </div> 回答1: You can do this with position:absolute; on the #second div like this : FIDDLE CSS : #wrapper{ position:relative; } #second {

问题 Just like http://twitter.github.com/bootstrap, The site what I working on now is responsive. I would like to remove transition animation when I click the collapsed navbar menu button. Above picture is the screenshot of what I'm asking. At TOP-RIGHT-CORNER , there is a three-lined menu button. 回答1: Bootstrap accomplishes the transition animation of the responsive nav bar the same way it does any collapse, which is using a CSS3 transition. To turn off the transition for only the navbar (leaving