CSS to simulate tables: inline divs which also have borders and break text?_问答_开发者

I'm trying to float two divs inline with each other inside a div of set width. Additionally they have borders and content that requires wrapping. It stops working when there's more content than fits on one line. I'm trying to be avoid using tables to solve this (see solution below) but but no luck so far. Any one got any ideas?

Edited question: expanding requirements to include: the divs should minimise their total width and not expand beyond the boundarys of the two main 50% columns. I've managed to achieve the first and second part (please see my own answer below) however I have an additional third requirement in that as these can be nested, the content then still stays within the two main columns but doesn't expand to fill up to a maximum width of 50% of the columns width. I'm working on a javascript solution which I won't be able to post back for some time.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>

    <style>
        body {
            width: 1024px;
        }

        .a_column {
            width: 50%;
            float:left;
        }

        .some_text {
            float:left;
            display:inline;
            border: thin solid green;
        }
        .a_block {
            float:left;
            display:inline;
            border: thin solid red;
            /*width: I can't set this as I don't know how much some_text will need, this can vary from nothing to a lot.*/
            word-wrap: break-word;  /* this doesn't work without a width specified*/
        }


            /*solution when using tables */
        .some_text_in_table, .a_block_in_table {
            vertical-align:top;
        }
        .some_text_in_table div {
            border: thin solid green;
        }
        .a_block_in_table div {
            border: thin solid red;
            word-wrap: break-word; 
        }

    </style>    

    </head>
    <body>

        <div class="a_column">
            <div class="some_text">
                some text here.
            </div>
            <div class="a_block">
                Less text and there's no problem.
            </div>
        </div>
        <div class="a_column">
            <div class="some_text">
                some text here.
            </div>
            <div class="a_block">
                Putting a lot of text into a div that you want a border around will
                cause it to move down one line.  Instead I'd like it to float inline
                with its sibling div; you can remove the float:left but then it
                completely messes up the border.  An_additional_thing_I'd_like_is_for_long_sentences_to_be_broken_by_the_word_wrap,_but_this_requires_that_the_width_of
                a_column be set and I can't do this as I don't always know how much
                room some_text will need.
            </div>
        </div>
        <div style="clear:both;"></div>

        <h3> With tables, solution with in 7 minutes.  So much easier:</h1>

        <table style="table-layout: fixed; width: 100%;">
            <tr>
                <td colspan="2" style="width: 50%;">

                </td>
                <td colspan="2" style="width: 50%;">

                </td>
            </tr>
            <tr>
                <td class="some_text_in_table">
                    <div>
                        some text here.
                    </div>
                </td>
                <td class="a_block_in_table">
                    开发者_C百科<div>
                        some text here.
                    </div>
                </td>
                <td class="some_text_in_table">
                    <div>
                        Less text and there's no problem.
                    </div>
                </td>
                <td class="a_block_in_table">
                    <div>
                        Putting a lot of text into a div that you want a border around will cause it to move down one line.  Instead I'd like it to float inline with its sibling div; you can remove the float:left but then it completely messes up the border.  An_additional_thing_I'd_like_is_for_long_sentences_to_be_broken_by_the_word_wrap,_but_this_requires_that_the_width_of a_column be set and I can't do this as I don't always know how much room some_text will need.
                    </div>
                </td>
            </tr>
        </table>

    </body>
</html>

Fiddle with my code here: http://jsfiddle.net/cdepZ/

display:table-cell;

Example: http://jsfiddle.net/TAhAv/

You are right in wanting to avoid tables with this layout - as you mentioned, this is not tabular data which you are chosing to display.

You mention in your CSS that you cannot set a width on .a_block because you do not know how much space you need. However, when you use a table you are actually setting a width (25%) as each cell is equally split amongst the over-all width.

So to achieve what you want to do (which will match the tables layout), you will have to set a width on these elements.

Here is a JSFiddle of how you could achieve this:

http://jsfiddle.net/ndhrd/39/

Set your widths properly with the space you have. Borders take 2px vertically and horizontally as well.

.a_column {
    width: 512px;
    float:left;
}
.a_block, .some_text{
    width: 254px;
    float: left;
    word-wrap: break-word;
}
.a_block{
     border: 1px solid green;
}
.some_text{
     border: 1px solid red;
}

I got it working here: http://jsfiddle.net/cdepZ/7/

Putting a lot of text into a div is now no problem, it will wrap and break any long sentences that go over 50% of it's parent divs' width. And it will minimise any content that it can whilst maintaining good looking borders.
Nesting this structure can keep it with in the limits of the .a_column but then doesn't allow all elements to expand fully.

I think the only solution is a javascript one :|

http://jsfiddle.net/uHEVJ/1/

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>

    <style>
        body {
            width: 1024px;
        }

        .a_column {
            width: 49%;  /* 49% rather than 50% to cope with the 1 pixel width borders*/
            float:left;
            border: thin solid blue;
        }

        .a_container{
            display:inline;
        }
        .a_container > div{
            max-width: 49%;  /* 49% rather than 50% to cope with the 1 pixel width borders*/
            float: left;
            word-wrap: break-word;
        }               
        .some_text {
            border: thin solid green;
        }

        .a_block {
            border: thin solid red;
        }

    </style>    

    </head>
    <body>


        <h3> Used a "display:inline;" div as a container to position each Div inside which has float:left (to minimise it's size)</h3>

        <div class="a_column">
            <div class="a_container">
                <div class="some_text">
                    some text
                </div>
            </div>
            <div class="a_container">
                <div class="a_block">
                    Less text and there's no problem.
                </div>
            </div>
        </div>
        <div class="a_column">
            <div class="a_container">
                <div class="some_text">
                    some text here.
                </div>
            </div>
            <div class="a_container">
                <div class="a_block">
                    Putting a lot of text into a div is now no problem, it_will_wrap_and_break_any_long_sentences_that_go_over_50%_of_it's_parent divs' width.  And it will minimise any content that it can whilst maintaining good looking borders
                </div>
            </div>
        </div>
        <div class="a_column">
            <div class="a_container">
                <div class="some_text">
                    Nesting this structure can keep it with in the limits of the .a_column but then doesn't allow all elements to expand fully.
                </div>
            </div>
            <div class="a_container">
                <div class="some_text">
                    Nesting this structure can keep it with in the limits of the .a_column but then doesn't allow all elements to expand fully.
                    <div>
                    <div class="a_container">
                        <div class="a_block">
                            some text
                        </div>
                    </div>
                    <div class="a_container">
                        <div class="a_block">
                            Nesting this structure can keep it with in the limits of the .a_column but then doesn't allow all elements to expand fully.
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>


    </body>
</html>