可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have a main wrapper div that is set 100% width. Inside that i would like to have two divs, one that is fixed width and the other that fills the rest of the space. How do i float the second div to fill the rest of the space. Thanks for any help.

回答1:

There are many ways to do what you're asking for:

Using CSS float property:
```
      Left 
      Right 
 
 
```

Using CSS display property - which can be used to make divs act like a table:

               Left 
          Right

There are more methods, but those two are the most popular.

回答2:

CSS3 introduced flexible boxes (aka. flex box) which can also achieve this behavior.

Simply define the width of the first div, and then give the second a flex-grow value of 1 which will allow it to fill the remaining width of the parent.

.container{     display: flex; } .fixed{     width: 200px; } .flex-item{     flex-grow: 1; }

jsFiddle demo

Note that flex boxes are not backwards compatible with old browsers, but is a great option for targeting modern browsers (see also Caniuse and MDN). A great comprehensive guide on how to use flex boxes is available on CSS Tricks.

回答3:

I have included a background colour in this example to help show where things are - and also what to do with content below the floated-area.

Don't put your styles inline in real life, extract them into a style sheet.

 Left 
  Right 
 Below

JSFiddle

回答4:

I don't know much about HTML and CSS design strategies, but if you're looking for something simple and that will fit the screen automatically (as I am) I believe the most straight forward solution is to make the divs behave as words in a paragraph. Try specifying display: inline-block

    Content in column A 
     Content in column B

You might or might not need to specify the width of the DIVs

回答5:

Give the first div a float left and fixed with, the second div 100% width an float left. That should do the trick. If you want to place items below it you need a clear:both on the item you want to place below

回答6:

If you're not tagetting IE6, then float the second

 and give it a margin equal to (or maybe a little bigger than) the first 's fixed width.  HTML:
        lorem ipsum 
      dolor sit amet 
 
 
  CSS:
  #main-wrapper {     100%;     background:red; } #fixed-width {     width:100px;     float:left } #rest-of-space {     margin-left:101px;         /* May have to increase depending on borders and margin of the fixd width div*/     background:blue; } 
  The margin accounts for the possibility that the 'rest-of-space' 
 may contain more content than the 'fixed-width' .  Don't give the fixed width one a background; if you need to visibly see these as different 'columns' then use the Faux Columns trick.
     


回答7:
               Sidebar     
              content      
 
 
  This will be cross browser compatible.  Without the margin-left you will run into issues with content running all the way to the left if you content is longer than your sidebar.
     


 文章来源: How to place div side by side

标签

div