fluid-layout

问题 This question already has answers here : Div layout with 3 columns: fixed - liquid - fixed (2 answers) Closed 6 years ago . Here is my code: http://jsfiddle.net/2Mtcq/. I want the middle column to be fluid, but left and right colums - to be set width. How do I make the middle fluid? I want it to look something like: https://dl.dropboxusercontent.com/u/22358199/Screen%20Shot%202013-05-31%20at%2011.00.31%20AM.png body { margin:10px; } #header { width:600px; background-color: #f0efee; } #main{

问题 I have a fluid-width left div and a fixed-width right div. It took a while to figure out how to make this work because I am theming a jrox site and jrox will not let me change the order the columns are generated. The HTML: <div id="jroxHeader" class="jroxHeader"> </div> <div id="jroxContent"> <div id="jroxMainContent" class="jroxSingleColumn"> Very little content. </div> <div id="jroxRightColumn" class="jroxRightColumn"> Places to go: <ul> <li>First Menu</li> <li>Second Menu</li> <li>Third

问题 body{ width:auto; color:white; font-size:15px; width:100%; max-width:1980px; min-width:334px; margin:0px auto; } This is my code. I need thumbnails to be in the center for all screen resolutions. But I can't do it. I even tried tag. It didn't work either. What should I do? 回答1: see this url : http://jsfiddle.net/DyRS4/2/ html: <div id="my-div">my div</div> css: div#my-div{ margin:0px auto; background: red; width: 100px; height: 100px; } 回答2: CSS .picture_area { width:/*width of picture area

问题 I have the following setup, but setting the width of the divs to a something around 30% is not working consistently (once the window width goes less than some number the third divs drops below.. Is there a better way of doing this, so that my divs always stay inline and keep getting smaller and smaller while the margin stays fixed at 18px between them ? CSS : .parent { width: 100%; height: 50px; } .child { float: left; margin-right: 18px; border: 2px solid white; text-align: center; line

问题 I have a suspicion this might need Flexbox (or would simply be a lot easier with), but maybe someone has an idea/workaround. I have a structure like this: <section> <div>Some Text Here</div> <div></div> </section> Section is width: 100%. I want the first div (floating left) to stretch to different widths depending on text, and I want the second div to take whatever percentage is left of section. Each div will probably contain various other divs floating inside (and they in turn will use

问题 I have a centered red div (blue) with a max width (1240px) in my layout and I search to make this in CSS. The logo area (purple) from the left of the centering area (blue) is 300px. At the left of this point, in red, it will be fluid (whatever the screen resolution you have). (btw, that's the same thing for the lightgray div just below) Do you have an idea to do that? <header> <div id="logo"> <div class="w"> <a href="#">Website name</a> </div> </div> <div class="wrap"> <div class="r"> <nav id

问题 I am not using jquery mobile. I built a template in WordPress and have a full width background that can be set to a different one for each page: Background_1.jpg = Home, Background_1.jpg = About, ens.... This is what is loaded in the front end: <div id="bg"> <img id="background" src="images/Background_1.jpg" alt="background"> </div> So my problem is the following: When i get to the fluid grid layouts i would like to remove this element completely to speed up the load time. I also dont want to

问题 Hello I've got a question about a layout. I have a website where I fill divs with information. These Divs need to be next to each other with the same amount of space between them and between the sides of the container div. I'm making it for mobile phones so I don't know the width of there screens and it should look fine on all the different screen resolutions. Currently I've got this: Fiddle: Fiddle HTML: <div id="container"> <div id="lineout"> <div id="foto"><img src="img/logo_null_image.jpg

问题 I dont want to use JS for this, only a css solution please . I want the columns inside of a containing div to fit inside equally i.e each one is a third of the width of the container. I have achieved this here - http://jsfiddle.net/yFxZX/ However, on top of this, I also want 10px margin between the columns, with the first column kissing the left edge of the container, and the right column kissing the right edge of the container. see image below for crude mock up. As the browser is re-sized or

问题 I am designing an elastic layout which is used with a dynamic number of items. As you can see, the layout is fluid and the number of items per row changes with the resolution. I can put on any classes I want on the item when I generate them with PHP if this helps. Code http://jsfiddle.net/N3VRM/3 http://jsfiddle.net/N3VRM/3/embedded/result/ Problem I always want the left-most pink grids to align with the far left of the page and the same on the right side. Currently there is always an extra 1