CSS для имитации таблиц: встроенные элементы div, которые также имеют границы и разбивают текст? - PullRequest
Новая
       21

CSS для имитации таблиц: встроенные элементы div, которые также имеют границы и разбивают текст?

1 голос
/ 12 сентября 2011

Я пытаюсь поместить два элемента div внутри друг друга в элементе div установленной ширины. Кроме того, они имеют границы и контент, который требует упаковки. Он перестает работать, когда в одной строке больше контента, чем помещается. Я пытаюсь избегать использования таблиц для решения этой проблемы (см. Решение ниже), но пока не получилось. У кого-нибудь есть идеи?

Отредактированный вопрос: расширение требований для включения: div должны минимизировать их общую ширину и не расширяться за пределы двух основных 50% столбцов. Мне удалось выполнить первую и вторую часть (см. Мой собственный ответ ниже), однако у меня есть дополнительное третье требование, заключающееся в том, что, поскольку они могут быть вложенными, содержимое остается в двух основных столбцах, но не расширяется до заполнить до максимальной ширины 50% ширины столбцов. Я работаю над решением javascript, которое не смогу опубликовать в течение некоторого времени. 

<!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">
                    <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>

Возьми мой код здесь: http://jsfiddle.net/cdepZ/

Ответы [ 4 ]

3 голосов
/ 12 сентября 2011 
display:table-cell;

Пример: http://jsfiddle.net/TAhAv/

2 голосов
/ 12 сентября 2011

Вы правы в том, что хотите избежать таблиц с этим макетом - как вы упоминали, это не табличные данные, которые вы выбираете для отображения.

В своем CSS вы упоминаете, что не можете установить ширину .a_block потому что вы не знаете, сколько места вам нужно.Однако, когда вы используете таблицу, вы фактически устанавливаете ширину (25%), так как каждая ячейка поровну делится между общей шириной.

Таким образом, чтобы достичь того, что вы хотите сделать (что будет соответствоватьтаблицы), вам нужно будет установить ширину для этих элементов.

Вот JSFiddle о том, как вы могли бы достичь этого:

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

0 голосов
/ 12 сентября 2011

Помещение большого количества текста в div теперь не проблема, оно обернет и разбит любые длинные предложения, которые превышают 50% ширины его родительских divов. И это сведет к минимуму любой контент, который он может, сохраняя при этом красивые границы.
Вложив эту структуру, вы можете оставить ее в пределах .a_column, но тогда не сможете полностью развернуть все элементы.

Я думаю, что единственным решением является javascript: |

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>
0 голосов
/ 12 сентября 2011

Установите правильную ширину в соответствии с имеющимся пространством. Границы занимают 2px по вертикали и по горизонтали. 

.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;
}

У меня это работает здесь: http://jsfiddle.net/cdepZ/7/

...