html - 内容太大时div不 float

Question

我正在尝试并排放置两个 div。左边的会有一张图片，右边的会有一些数据。我希望右侧的那个在没有足够空间时截断。不幸的是，整个 div 并没有被截断，而是下降到原本在没有足够空间时位于左侧的那个下方。下图应该清楚这一点。

这是我的 html。我正在抛出 overflow:hidden; white-space: nowrap; 无处不在。当右侧 div 中的内容不太大时(或者当我将弹出窗口调整得足够宽时)，所有内容都会按照我想要的方式 float 。

(这不是 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;
}