Question

我正试图将两个div并排。左边的图像有一个图像，右边的图像有一些图像。当没有足够的空间时，我希望右边的那个能够截断。不幸的是，没有截断，整个div只是在没有足够空间的情况下在左边的那个下降。下面的图片应该清楚说明。

这是我的HTML。我到处扔overflow:hidden; white-space: nowrap;无济于事。当右边div中的内容不是太大时（或者当我将弹出窗口调整得足够宽时），一切都像我想要的那样浮动。

（这不是MVC，如果是的话，我会使用Ravor语法和gusto）

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

enter image description here

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

当内容太大时，Div不浮动

2 个答案: