CSS two div width 50% in one line with line break in file

Question

I try to build fluid layout using percentages as widths. Do do so i tried this:

A


        
                      

              相关标签:
       
      

Answer 1

How can i do something like that but without using absolute position and float?

Apart from using the inline-block approach (as mentioned in other answers) here are some other approaches:

1) CSS tables (FIDDLE)

.container {
  display: table;
  width: 100%;
}
.container div {
  display: table-cell;
}

<div class="container">
  <div>A</div>
  <div>B</div>
</div>

2) Flexbox (FIDDLE)

.container {
  display: flex;
}
.container div {
  flex: 1;
}

<div class="container">
  <div>A</div>
  <div>B</div>
</div>

For a reference, this CSS-tricks post seems to sum up the various approaches to acheive this.

Answer 2

basically inline-table is for element table, I guess what you really need here is inline-block, if you have to use inline-table anyway, try it this way:

<div style="width:50%; display:inline-table;">A</div><!--
--><div style="width:50%; display:inline-table;">B</div>

Answer 3

The problem is that when something is inline, every whitespace is treated as an actual space. So it will influence the width of the elements. I recommend using float or display: inline-block. (Just don't leave any whitespace between the divs).

Here is a demo:

div {
  background: red;
}
div + div {
  background: green;
}

<div style="width:50%; display:inline-block;">A</div><div style="width:50%; display:inline-block;">B</div>

Answer 4

Wrap them around a div with the following CSS

.div_wrapper{
    white-space: nowrap;
}

Answer 5

Sorry but all the answers I see here are either hacky or fail if you sneeze a little harder.

If you use a table you can (if you wish) add a space between the divs, set borders, padding...

<table width="100%" cellspacing="0">
    <tr>
        <td style="width:50%;">A</td>
        <td style="width:50%;">B</td>            
    </tr>
</table>

Check a more complete example here: http://jsfiddle.net/qPduw/5/

Answer 6

<div id="wrapper" style="width: 400px">
    <div id="left" style="float: left; width: 200px;">Left</div>
    <div id="right" style="float: right; width: 200px;">Left</div>
    <div style="clear: both;"></div>
</div>

I know this question wanted inline block, but try to view http://jsfiddle.net/N9mzE/1/ in IE 7 (the oldest browser supported where I work). The divs are not side by side.

OP said he did not want to use floats because he did not like them. Well...in my opinion, making good webpages that does not look weird in any browsers should be the maingoal, and you do this by using floats.

Honestly, I can see the problem. Floats are fantastic.