Question

首先，是的，我确实进行了搜索并发现了很多类似的问题而且没有，这些解决方案对我有用。

现在这是我的主要问题：

我尝试将"a"个元素排成一行并换行，如果有更多内容适合父"td"。但我可以让他们排队或扭曲。

"1st"和“2nd_main_container"排成一行。"1st"有一个固定宽度"2nd"占用"wrapper"的剩余空格。

我已尝试使用浮点内联块添加"width:100%"以及我的最后一次尝试（请参阅代码），每个"a"位于另一个主要div"浮动左侧的单独“"div"内。”不会换行，他们只是增长主"div"，"td"，"tr"，"table"和"2nd_main_container"。"wrapper"大小不会改变。

我想我的问题是"2nd_main_container"没有固定宽度，但这不是一个选项。

我希望有人可以帮我解决这个问题。提前谢谢。

http://jsfiddle.net/p7nhjr08/4/

这里是我的代码：

<style>
    #wrapper {
        width: 100%;
        white-space: nowrap;
    }
    #1st_main_container {
        display: inline-block;
        padding-left: 16px;
        padding-right: 8px;
        padding-top: 8px;
        padding-bottom: 16px;
        width: 400px;
    }
    #2nd_main_container {
        display: inline-block;
        padding-left: 8px;
        padding-right: 16px;
        padding-top: 8px;
        padding-bottom: 16px;
        vertical-align: top;
    }
    #2nd_main_container th {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 11px;
        font-weight: bold;
        text-align: right;
    }
    #2nd_main_container td {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 12px;
        font-weight: normal;
        text-align: left;
        padding-left: 20px;
    }
    #content {
        white-space: normal;
        overflow: hidden;
    }
    #content div {
        float:left;
    }
    #container a {
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 0;
        padding-bottom: 0;
    }
</style>



<div id="wrapper">
   <div id="1st_main_container">
        Something
    </div>
    <div id="2nd_main_container">
        <table>
            <tbody>
                <tr>
                    <th>
                        Something:
                    </th>
                    <td>
                        Something
                    </td>
                </tr>
                <tr>
                    <th>
                        Something:
                    </th>
                    <td>
                        Something
                    </td>
                </tr>
                <tr>
                    <th>
                        Something:
                    </th>
                    <td>
                        Something
                    </td>
                </tr>
                <tr>
                    <th>
                        Something:
                    </th>
                    <td >
                        Something
                    </td>
                </tr>
                <tr>
                    <th>
                        Something:
                    </th>
                    <td id="container">
                        <div id="content">
                            <div>
                                <a></a>
                            </div>
                            <div>
                                <a></a>
                            </div>
                            ...
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

所以你有一个可变宽度的包装器，包含两个div列。第一个具有固定宽度，第二个div应使用剩余宽度，正确吗？

也许您应该查看 css3 flexbox

如何包裹<a> elements inside of a table?</a>

1 个答案: