css3

问题 I am trying to make a simple sidebar layout with a flat HTML structure, in which the first <aside> element fills in the 1st column completely. My problem is, that the negative row end value seems to not work for the implicitly created rows for all my elements in the 2nd column. Expected: Actual: Below is a runnable code snippet that illustrates the problem. article { display: grid; grid-template-columns: 200px 1fr; background: gray; } aside { grid-row: 1/-1; grid-column: 1/2; background: pink

问题 I'm trying to align to the left an image with a width which is relative to the page width. There are couple of unfortunate constraints which I cannot change: the image has a wrapper, I cannot apply width to the wrapper because class responsible for the width is applied to the image (and I cannot change that too :D), the solution must be CSS-only. The structure looks like this: <p>Lipsum...</p> <div class="align-left"> <img src="http://lorempixel.com/1000/1000/" class="width50" alt="lipsum"

问题 Closed . This question needs details or clarity. It is not currently accepting answers. Want to improve this question? Add details and clarify the problem by editing this post. Closed 4 years ago . Need Some Help... Stucked At Very Peek Moment, I Have To Complete This Work By Tomorrow But My CSS Code Is Not Working For Header And Footer, Whereas The Same File Is Working For Other Things Like Font-Family, Font-Size, Body Background Color... body { font-family: Arial; font-size: 15px; line

问题 Closed . This question needs details or clarity. It is not currently accepting answers. Want to improve this question? Add details and clarify the problem by editing this post. Closed 4 years ago . Need Some Help... Stucked At Very Peek Moment, I Have To Complete This Work By Tomorrow But My CSS Code Is Not Working For Header And Footer, Whereas The Same File Is Working For Other Things Like Font-Family, Font-Size, Body Background Color... body { font-family: Arial; font-size: 15px; line

问题 I have a flexbox ( flex-direction: row ) with 2 columns of content and a fixed height. I want the left and right column to have a red and blue background respectively. If either of the columns overflow, the flexbox 's scrollbar appears (the overflowed part is still red/blue). If a column's content height is less than the flexbox 's height, the space below should still be red/blue. Without using gradient colors or javascript, how can I achieve this effect? Demo (I want the gray part to be blue

问题 I am using Materializecss and it uses Google design icons. On some mobiles, Google Material-Icons can'be shown. What is caused it? 回答1: The problems is occurred because of text-rendering property. Text-rendering is not a CSS standart but it allows use to choose text quality. In google material css this property comes with it's default value . If you add this style you will solve the problem : .material-icons { text-rendering: optimizeLegibility; } By this definition, we say to the browser

问题 I am trying to vertical align middle li content but not able to do it. #leftPanel { width:25%; display:table; } #leftPanel li { list-style: none; margin-bottom: 10px; width: 100%; } #leftPanel li img { margin-right:10px; } .activeBtn, .button5 { display: table-cell; float: none; width: 100%; background:#ccc; height: 100%; vertical-align:middle; } <div id="leftPanel"> <ul> <li> <a href="#" class="activeBtn"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Location &

问题 I have a striped divider in CSS, with repeating linear gradient, but it is doing some strange thing, here is an image : As you can see, the thickness of some of the stripes are not the same, I would like to have the striped divider like this, but all with the same "font-weight", I tried to fix the code adding or reducing pixels, but not working Here is the code : .striped_divider { height: 20px; background: -webkit-repeating-linear-gradient(135deg, transparent 2px, transparent 7px,#cccccc 8px

问题 There is a resize property in CSS3 which can be applied to a div (e.g. http://www.impressivewebs.com/css3-resize/). I am building a rich UI, and found this feature very useful in my case. I try to rely on CSS3 more than JavaScript, so I like this "native" solution. This problem is - it doesn't allow a user to make the box less than its original size. It reproduces in Safari 5.0.5, Chrome 12.0.742.91, while Firefox 4.0.1 resizes a box in both ways. Question : is there any workaround for

问题 I am trying to create a button like this: I dont know how to create a light moon shape over the top of the button. This is still far off: Fiddle Demo. .moon { width: 50px; height: 50px; border-radius: 50%; box-shadow: 15px 15px 0 0 green; } 回答1: With just a little inset you can style the shadow on top of the object. E.g. Crescent shape. And, This is the button you want. .moon { background-color: #222; width: 50px; height: 50px; border-radius: 50%; border: 4px solid #222; /* I set 2 shadows