内容太大时 div 不浮动

Question

我正在尝试并排放置两个 div。左边有一张图像，右边有一些数据。我希望右边的那个在没有足够的空间时被截断。不幸的是，当没有足够的空间时，整个 div 并没有被截断，而是落到了左侧的 div 下方。下面的图片应该可以清楚地说明这一点。

这是我的 html。我抛出了溢出：隐藏；空白：nowrap;到处都是，但无济于事。当右侧 div 中的内容不太大时（或者当我调整弹出窗口的大小足够宽时），所有内容都会像我想要的那样浮动。

（这不是 MVC，如果是的话，我会热情地使用 Ravor 语法）

    <div id="tabInfo" class="tabDiv">
        <ul>
            <li><a href="#tabs-info">Book Info</a></li>
            <li><a href="#tabs-reviews">Reviews</a></li>
            <li><a href="#tabs-subjects">Related Subjects</a></li>
        </ul>
        <div id="tabs-info">
            <div style="float:left;">
                <img src="../books/covers/medium/<%= Book.medImgID %>.jpg" />
            </div>
            <div style="float:left; margin-left:10px; font-size:10pt; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;">
                <div style="font-size:14pt; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;">
                    <b><%= Book.Title %></b>
                </div>
                <div title='<%= PublisherDisplay %>' style='margin-top:5px; font-size:12pt'><%= PublisherDisplay %></div>

                <div style="margin-top:7px;">Author<%= Book.AuthorsArray.Length == 1 ? "" : "s" %></div>
                    <% foreach (string auth in Book.AuthorsArray) { %>
                        <div style="margin-left:10px;"><%= auth %></div>
                    <% } %>

                <div title='<%= Book.Pages ?? 0 %>' Pages' style='margin-top:6px;'><%= Book.Pages ?? 0 %> Pages</div>
                <div style="margin-top:5px; height:16px; margin-top:6px;">
                    <div style="vertical-align: middle; float: left;">Read?&nbsp;&nbsp;</div>
                    <img src='../Img/IsRead/<%= Book.IsRead ? "check" : "cross" %>.png' style='width: 16px; height: 16px;' />
                </div>
            </div>
        </div>

Answer 1

如果您只是在 div 上设置 max-width 属性，那么它们就不会超过设定的宽度，应该可以工作。

---

您需要更改此设置才能与您的代码一起使用；这是一个例子:)

div.left
{
    float: left;
    width: 100px;
}

div.right
{
    margin-left: 110px;
}

div
{
    border: 1px solid red;
}

Answer 2

我建议为左列和右列设置固定宽度，否则右列将低于左列，因为选项卡区域没有足够的空间。因此，选项卡内容区域也必须设置宽度值。

您不需要设置空白和文本溢出属性

http://jsbin.com/uvibiz