Html CSS模拟表格：也有边框和分隔符的内联div？_Html_Css_Html Table_Css Float

Html CSS模拟表格：也有边框和分隔符的内联div？

html css

Html CSS模拟表格：也有边框和分隔符的内联div？,html,css,html-table,css-float,Html,Css,Html Table,Css Float,我试着在一个设置宽度的div中浮动两个相互内联的div。此外，它们还有需要包装的边框和内容。当一行中的内容超过一行时，它就会停止工作。我试图避免使用表格来解决这个问题（见下面的解决方案），但到目前为止运气不佳。有人有什么想法吗编辑的问题：扩展需求以包括： div应最小化其总宽度，且不应超出两个50%主列的边界。我已经设法实现了第一部分和第二部分（请参见下面我自己的答案），但是我还有一个额外的第三个要求，因为这些内容可以嵌套，所以内容仍然保留在两个主列中，但不会扩展到最大填充宽度为列宽度的50

我试着在一个设置宽度的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>


演示
身体{
宽度：1024px；
}
a.a_栏{
宽度：50%；
浮动：左；
}
.一些文字{
浮动：左；
显示：内联；
边框：细实绿色；
}
.a_座{
浮动：左；
显示：内联；
边框：薄而实的红色；
/*宽度：我不能设置这个，因为我不知道需要多少文本，这个可以从零到很多*/
换行：断开word；/*如果未指定宽度，则此操作无效*/
}
/*使用表格时的解决方案*/
.表格中的某些文本，.表格中的块{
垂直对齐：顶部；
}
.表格div中的某些文本{
边框：细实绿色；
}
.a\u表分区中的块{
边框：薄而实的红色；
单词包装：打断单词；
}
这里有一些文字。
文本更少，没有问题。
这里有一些文字。
将大量文本放入一个需要在其周围加边框的div将
使其向下移动一行。相反，我希望它能在线浮动
和它的兄弟div；您可以删除浮动：左，然后删除它
完全弄乱了边界。另外一件事，我想，是长句子，被单词，包裹打断，但这需要，宽度
必须设置一列，但我不能这样做，因为我并不总是知道有多少
房间里需要一些文本。
对于桌子，7分钟内解决问题。简单多了：
这里有一些文字。
这里有一些文字。
文本更少，没有问题。
将大量文本放入一个需要有边框的div中会导致它下移一行。相反，我希望它与它的兄弟div一起浮动；您可以删除float:left，但它会完全弄乱边界。另外一件事我希望是长句子被单词包装打破，但是这需要设置一列的宽度，我不能这样做，因为我不知道一些文本需要多少空间。

在这里修改我的代码：

示例：

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

我在这里工作：

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

我在这里工作：

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

您在CSS中提到，您不能在

.a_块

上设置宽度，因为您不知道需要多少空间。但是，当您使用表格时，实际上是在设置宽度（

25%

），因为每个单元格在整个宽度中平均分割

因此，为了实现您想要做的事情（这将匹配表格布局），您必须在这些元素上设置一个宽度

以下是如何实现这一目标的简要介绍：