fluid-layout | 易学教程

Two column div layout with fluid left and fixed right column

阅读更多关于 Two column div layout with fluid left and fixed right column

I want to make a two column layout using DIVs, where right column will have a fixed width of 200px and the left one would take all the space that is left. It's quite easy, if you use tables: <table width="100%"> <tr> <td>Column 1</td> <td width="200">Column 2 (always 200px)</td> </tr> </table> But how about DIVs? Is it possible to accomplish this? If yes, then how? Salman A The following examples are source ordered i.e. column 1 appears before column 2 in the HTML source. Whether a column appears on left or right is controlled by CSS: Fixed Right #wrapper { margin-right: 200px; } #content {

Why doesn't min-content work with auto-fill or auto-fit?

阅读更多关于 Why doesn't min-content work with auto-fill or auto-fit?

问题 Basically, I do not understand why this works: .grid { display: grid; grid-template-columns: repeat(4, min-content); } But this doesn't work: .grid { display: grid; grid-template-columns: repeat(auto-fill, min-content); } I really wish to make the latter functionality possible. Are there other ways to make it work? 回答1: The second rule doesn't work because min-content is an intrinsic sizing function . § 7.2.2.1. Syntax of repeat() Automatic repetitions ( auto-fill or auto-fit ) cannot be

Items grid with inner padding only

阅读更多关于 Items grid with inner padding only

What techniques are there for creating a products grid that has padding between each item, but only within the grid? For example, what I am trying to achieve is the below: Sample markup: <div id="container"> <div class="item">  </div> </div> CSS: #container { width: 100%; min-width: 960px; } .item { float: left; width: 300px; height: 100px; } (in the above, .item is going to be output 9 times). The solution would need to be IE8+ compatible and preferably using a technique that isn't a hack. I have tried using display: table with border-spacing property - but this outputs the

Why doesn't IE respect table width with fluid image child

阅读更多关于 Why doesn't IE respect table width with fluid image child

问题 Consider the following code: HTML: <table> <tr> <td><img src="http://watduck.jpg.to" /></td> </tr> </table> CSS: table { width: 10% } img { max-width: 100% } The image should obviously be a 10th the width of the window, which is exactly what it is in every browser except IE, where it simply falls back to its original size. However, consider this: HTML: <div><img src="http://watduck.jpg.to" /></div> CSS: div { width: 10% } img { max-width: 100% } which IE does get right, and displays at a 10th

How to make a fluid sticky footer

阅读更多关于 How to make a fluid sticky footer

问题 I'm looking for a solution to have a sticky footer which height may be dependent on the width of the browser. Sticky footers in fluid designs are not all that trivial. I've found hints, discussions and solutions to implement sticky footers. However, all these are dependent on a fixed and known height of the footer. In my case, the height of the footer contains text and the number of lines is dependent on the width of the screen. Rather than making al sorts of media queries and building some

Why is my CSS media query being ignored or overridden?

阅读更多关于 Why is my CSS media query being ignored or overridden?

This is driving me insane! I've looked at a few questions on Stackoverflow and see that an ID element has priority over a class element (which is good to know but I have a feeling this isn't my problem). It's my NAVIGATION menu that I'm struggling with. (I use max-width btw) Here is the GENERAL CSS for my NAV: nav{ float:right; margin-left:2%;} nav ul{ float:left; list-style:none; width:100%;} nav ul li{ float:left; margin-left:5px; } nav a{ display:inline-block; float:left; color:#f0f0f0; text-transform:uppercase; font-family:TrumpGothicWestRegular; font-size:1.5em; padding: 100px 20px 20px

Bootstrap: fluid table too wide for window

阅读更多关于 Bootstrap: fluid table too wide for window

问题 I'm working on a project using twitter bootstrap. We have a table that has lots of columns and is going to be larger than the browser window almost every time. This is what happens on the right : The table border stays in the browser window, while the table contents do not. If I scroll, the borders stay where they are, they do not "follow" the browser window. You can see the problem on this jsfiddle. It works on Safari, not on Chrome or Firefox. The layout is like this : <body> <div class=

hide div tag on mobile view only?

阅读更多关于 hide div tag on mobile view only?

I'm creating a fluid layout for a site. I'm trying to hide the contents of a <div> or the whole <div> itself in the mobile view, but not the tablet and desktop view. Here's what I've got so far... #title_message { clear: both; float: left; margin: 10px auto 5px 20px; width: 28%; display: none; } I have the display set to 'none' for the mobile layout and set as block on the tablet/desktop layouts... Is there an easier way to do that, or is that it? Matt You will need two things. The first is @media screen to activate the specific code at a certain screen size, used for responsive design. The

CSS fluid columns, fixed margins; the holy grail of holy grails

阅读更多关于 CSS fluid columns, fixed margins; the holy grail of holy grails

问题 Update & Summary I feel obligated to make this question clearer, now that there is a bounty attached. ( Also, I'm pretty sure this will be child's play when the calc() CSS3 unit value is supported, doing something like width: calc(25% - 5px) ; though we'll probably be browsing the internet in our minds by that point ) I'm working on a CSS framework for a few projects that share design requirements; namely a fluid 12 column layout. Using floated .column elements with percentage widths of (100%

Maintain aspect ratio of a div according to height [duplicate]

阅读更多关于 Maintain aspect ratio of a div according to height [duplicate]

问题 This question already has answers here : Maintain div aspect ratio according to height (5 answers) Closed 3 years ago . I have to maintain the aspect ratio of a div with respect to the height on window resize. I can maintain the aspect ratio(x:y) with regard to the width(X%) using padding-bottom; or padding-top; . So from the analogy, I tried using padding-left; .wrapper{ height: Y%, position: relative; } .wrapper:after{ padding-left: Y(x/y)%; display:block; } But the percentage value of