1

有三个 div，d1，d2 和 d3，我希望 d1 可以垂直包装内容，但水平可见。

如果 d2 和 d3 没有浮动属性，则 d1 会给我想要的结果。

但是 d2 和 d2 具有浮动属性，我需要添加 overflow-y:auto 以使其垂直包装。

我添加了溢出-x：可见，但它仍然有一个滚动条。

那么如何保持水平可见？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#d1
{
    background-color:red;
    padding:10px;
    width:100px;

    overflow-x:visible;
    overflow-y:auto;
}
#d2
{
    background-color:blue;
    float:left;

    width:150px;
    height:30px;
}
#d3
{
    background-color:green;
    float:left;

    width:50px;
    height:230px;
}
</style>
</head>
<body>
<div id="d1">
    <div id="d2">in</div>
    <div id="d3">
        out
    </div>
</div>
</body>
</html>
4

1 回答 1

2

如果我理解你的问题，你可以使用“清晰”的 DIV 来解决这个问题。编辑代码：

CSS

<style>
#d1
{
    background-color:red;
    padding:10px;
    width:100px;

    overflow-x:visible;

}
#d2
{
    background-color:blue;
    float:left;

    width:150px;
    height:30px;
}
#d3
{
    background-color:green;
    float:left;

    width:50px;
    height:230px;
}

.clear{
    clear:both;
}
</style>

HTML

<div id="d1">
    <div id="d2">in</div>
    <div id="d3">out</div>
    <div class="clear"></div>
</div>
于 2012-06-27T03:01:54.097 回答