Question

我有一个固定宽度的DIV，左边是浮动的，主要内容就在它旁边。当我调整窗口大小时，而不是水平滚动条，我看到主DIV向下跳到浮动DIV下方，即“浮动”效果消失。

这里有一个演示：

如何告诉浏览器我总是想要逐个大小地看到这两个DIV，但没有必须在主要上设置min-width DIV（我希望主div中的表在滚动条出现之前尽可能地挤压）。

Answer 1

是否有必要使用类"main"的两个元素？通过将文本div的类名更改为"mainBody"，我能够获得您想要的内容...

.main-left {
    float:left;
}
.left-block-1 {
    width: 160px;
    height: 400px;
    background-color: grey;
}
.mainBody {
    left:175px;
    width:400px;
    position:absolute; 
}
.body{
    overflow:auto;
}

所以来自编辑小提琴的html是......

<div class="main">
    <div class="main-left">
        <div class="left-block-1"></div>
    </div>
    <div class="mainBody">
        Block-1
        <br>
        QWERTYUIOPASDFGHJKLZXCVBNMQWER
        <table>
            <tr><td>A B C</td><td>A B C D E F G H I K L M O P Q R S T U V W X Y Z</td></tr>
            <tr><td>A B C</td><td>A B C D E F G H I K L M O P Q R S T U V W X Y Z</td></tr>
            <tr><td>A B C</td><td>A B C D E F G H I K L M O P Q R S T U V W X Y Z</td></tr>
        </table>
    </div>
</div>

Answer 2

如果要使布局响应，则必须使用百分比单位。并使用word-wrap:break-word;使文字转到下一行

Live demo

否则，你需要使用overflow：hidden;但是这会在需要更多空间时截断单词

.main{
    overflow:hidden;
}

Live demo

由于水平溢出，浮动停止调整大小

2 个答案: