css3

问题 I've created a jsFiddle here to illustrate my problem in code (Double click the pink element and try to drag on outside the blue box, double click again and compare the results). Problem: When I make a CSS rotate on a draggable element with a constraint, the constraint doesn't work as expected. The draggable element can be dragged partially outside the container. My guess is that it has something to do with how the CSS rotate works, but I'm not sure. Is there some way to solve this problem?

问题 The footer should remain in the bottom even when i re size the page. In my case footer is overlapping the contents when i re size the height of the page. .body{ background: #00b7ea; /* Old browsers */ font-family:Arial, Helvetica, sans-serif; font-size:85%; height: 100%; } .container{ min-height:100%; position: relative; } .formContainer{ width:30%; height: 100px; background-color:#fff; margin:auto; padding-top: 0; border-radius:5px; box-shadow:5px 5px 55px #9999; padding-bottom:60px; }

问题 I have these media queries to apply different styles for iPhone 4 and iPhone 5 /* iPhone 4 (landscape) */ @media only screen and (min-width:320px) and (max-width:480px) and (orientation:landscape) { .background img { height: 5px; } } /* iPhone 4 (portrait) */ @media only screen and (min-width:320px) and (max-width:480px) and (orientation:portrait) { .background img { height: 10px; } } /* iPhone 5 (landscape) */ @media only screen and (min-width:320px) and (max-width:568px) and (orientation

问题 Just discovered multiple background. I would like to know how can you apply determined properties to only one of these backgrounds of your list of a multiple background. How can you target it individually ? Here is an example to illustrate: body{ background: url(images/small-group-bubbles.png) repeat-x fixed 10% 0, url(images/blur-bubble.png) repeat-x fixed -130% 0, url(images/big-bubble.png) repeat-x fixed 40% 0, url(images/green-gra-bg.jpg) no-repeat center center fixed; -webkit-background

问题 This question already has an answer here : Why don't flex items shrink past content size? (1 answer) Closed last year . I am facing issues with white-space:nowrap when there is flex container. There is a flex container with flex-direction:row; in which there are two divs sidebar with certain width set using flex:0 0 70px; and the main-content . In the main-content with flex-direction:column two main divs, header and the content . Now in the content , there are three blade that has flex-grow:1

问题 I've got a container div which has got dynamic width, it changes depending on screen resolution. Inside such div I have another element with fixed height and width. I can give such element a margin: 0 auto; and align it horizontally in the middle, however this trick doesn't work to align it vertically in middle, as height of container div remains same (it's not fixed height, it depends on content inside the div). Therefore I'd like to somehow apply same margins as go to right and left, to top

问题 I am trying to come up with some CSS to match a style I have in my iPhone/Android apps. I have alternating row colors with opacity so my custom page background bleeds through. However, the issue I am having is that I don't want the text in the table cells to also be opaque. I want the text to have a opacity of 1.0 and the background to be an opacity = 0.12. See here for what it looks like now. CSS below: html { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size:

问题 When I try to use an html select inside of the pagination component the html select is offset and not properly aligned. I have only included the first half of the pagination with the html select inside of it for purpose of brevity. It should illustrate the issue and you can view the JSFiddle here. <div class="pagination pagination-large pagination-centered"> <ul> <li><a class="first_record" rel="tooltip" data-original-title="First record" href="#">First</a></li> <li><a class="previous_record"

问题 my template is as follows: .layout{ height:100%; width: 70%; position: fixed; } .header{ height:20%; width: 100%; } .content{ height:60%; width: 100%; } .footer{ height:20%; width: 100%; } the content has a default height 60% , and i want if the content is filled with data to get auto stretch for (height/width) when necessary, and a scroll appears for whole page, how to do so ? i tried the solution for giving the parent postion:relative; but that will ignore the default height and minimize

问题 div.tp-border-bottom's border hide when div.tp-banner add transform property, if I set div.tp-border-bottom:after element height to 2px then it is visible, all of this in android webview platform .tp-banner { width: 100px; height: 60px; -webkit-transform: translate(0px, 0px) translateZ(0px); transform: translate(0px, 0px) translateZ(0px); } .tp-border-bottom { position: relative; width: 100px; height: 60px; } .tp-border-bottom:after { content: ""; position: absolute; font-size: 0; line-height