fluid-layout

问题 I have a two column layout in which I have a static width for the right column of 350px, and for the left column the width should be such that it fills the rest of the page. Or at least that is what I want to happen, but unfortunately it's not. Here's a look at my css/html: http://jsfiddle.net/CmJ7P/. Any help you could offer on how to make this happen would be greatly appreciated. Edit: I'd prefer a solution in IE6 if you can 回答1: You need to remove the float from the left column and put the

问题 I am creating a form that requires the user to input their name and email address. The first line of the form has two inputs side by side for each part of the name and the 2nd line has one input for the email address that should be the same width as the first line combined. I'm trying to use the fluid grid system but can't line up the 2nd row with the first. <form action="/subscriptions" method="post"> <fieldset> <div class="control-group"> <label class="control-label" for="name">Name</label>

问题 I got an awesome incognita to share with you. I found it while trying to do a very simple thing - at least i thought it was simple. The Stage A parent element with a fixed height value which contains any number of child. Let's put divs as example, starting with 2 childs. <div class="parent"> <div class="child"></div> <div class="child"></div> </div> The Goal Style the child's height and vertical margin to match exactly the parent height, dividing the total height equally among the child

问题 I am working on a 3-column layout with two fixed-width sidebars (left and right) and a fluid center. I have followed A List Apart's Holy Grail article, and, although this works fine in most browsers, I am having some problems in Internet Explorer 7+. The problem with IE 7+ actually doesn't stem from this technique, but rather from the fact that the page is rendering in quirks mode. If I make it render in standards-compliance mode, however, many outdated elements become displaced and would

问题 I have been trying(in vain) to build a page whose elements would resize as I changed the window size. I have it working in css for images no problem, but I can't seem to accomplish the same for text, and I am not sure it is even possible in CSS. And I can't seem to find a jquery script that accomplishes this. When a user resizes the window, I essentially want the page to scale dynamically and fluidly, without the user having to invoke page zoom. This works fine on my img divs via css, but not

问题 This question already has answers here : Two column layout with left fluid and right fill the rest width (4 answers) Closed 2 years ago . I need to do a layout in this way: ---------------------- | header | ---------------------- | N | | | A | CONTENT | | V | | |-----| | | | ----BAR---- | |EMPTY| | | | | ---------------------- I want the overall width to be 100% of the body, the navigation has width 15% but min-width 120px. The width of the bar (that is an element in the content div) has to

问题 I have a layout setup which can be view here: http://jsfiddle.net/Pn3ts/ It all works fine but i need to set a max/min width around the whole lot. So i assume to do this i'd add in position: relative; onto the .row class. However if i do this the background of each .col seems to collapse. (see here: http://jsfiddle.net/YDBYK/) How would i work this? 回答1: Give the html , body , and .row a height of 100% and it'll work. html, body { height: 100%; } .row { position: relative; width:100%; height:

问题 I am trying to create a graph like this: http://bl.ocks.org/cmdoptesc/6228457 or like this http://raphaeljs.com/polar-clock.html But I want it to be able to scale (preferably without javascript) according to the browser width. I would love to be able to do this with CSS only, and if not with CSS, preferably without a library like raphael or d3 (though I'll take what I can get). Anybody know how to accomplish this in a way that scales down / up? UPDATE I made a JS Fiddle - this is exactly the

问题 I require a fairly complex layout. I've been trying for a few hours to figure this out but still no luck. I require a fixed div next to 5 fluid DIVs. All the fluid DIVs need to be different percentages, but all 6 DIVs combined (1 fixed + 5 fluid) must equal to the width of the parent DIV. The height of the parent div will be fixed. Here's what I want: http://i.imgur.com/u0L6hrz.png But here's what I have right now: http://jsfiddle.net/mnNzR/ I need to eliminate the whitespace so all the DIVs

问题 Imagine: <div class="outer"> <div class="inner"> </div> </div> Where: .outer is part of a column structure, and its width is a percentile and therefore fluid. .inner represents a fixed position element that should fill with a 100% width the .outer element. However its position vertically remains the same, therefore fixed . I’ve tried to implement this layout with the following CSS: .outer { position: relative; width: %; } .inner { position: fixed; width: 100%; } However, .inner does not