CSS 模拟表格：内联 div 也有边框和中断文本？

发布于 2024-12-04 04:44:01 字数 4345 浏览 1 评论 0原文

我正在尝试将两个 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/

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼眸 2024-12-11 04:44:01

display:table-cell;

示例： http://jsfiddle.net/TAhAv/

display:table-cell;

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

回复收藏 0 原文

莫相离 2024-12-11 04:44:01

您想要避免使用这种布局的表格是正确的 - 正如您所提到的，这不是您选择显示的表格数据。

您在CSS中提到您无法在.a_block上设置宽度，因为您不知道需要多少空间。但是，当您使用表格时，您实际上是在设置宽度 (25%)，因为每个单元格均等地分配到总宽度中。

因此，为了实现您想要执行的操作（与表格布局相匹配），您必须设置这些元素的宽度。

以下是 JSFiddle 说明如何实现此目的：

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

回复收藏 0 原文

苄①跕圉湢 2024-12-11 04:44:01

根据您拥有的空间正确设置宽度。边框在垂直和水平方向上也都是 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/

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/

回复收藏 0 原文

浅浅淡淡 2024-12-11 04:44:01

现在，将大量文本放入 div 中不再有问题，它会换行并破坏任何超过其父 div 宽度 50% 的长句子。它会尽可能减少任何内容，同时保持美观的边框。
嵌套此结构可以使其保持在 .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>

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>

回复收藏 0 原文

~没有更多了~