Question

这是一段简单的代码，但我为此问题尝试过的解决方案并没有奏效。

<!DOCTYPE html>
<head>
    <style>
        #ONE {
            float: left;
            border: 1px solid red;
            width: 500px;
            height: 50px;
        }
        #TWO {
            float: left;
            border: 1px solid yellow;
            width: 500px;
            height: 50px;
        }
    </style>
</head>
<body>

<header>

    <div id="ONE"></div>
    <div id="TWO"></div>

</header>

</body>
</html>

调整浏览器大小后，“ TWO ”div会低于“ ONE ”。我希望能够使div保持水平。如果不根据屏幕宽度调整它们的大小，我还没有找到一种合适的方法让它们在一条线上保持水平。

https://jsfiddle.net/hra5t6v0/

Answer 1

在这里你http://jsfiddle.net/DIRTY_SMITH/1j7xter3/10/

header{width: 1000px;}        

#ONE {
            float: left;
            background-color: red;
            width: 500px;
            height: 50px;
}
#TWO {
            float: left;
            background-color: blue;
            width: 500px;
            height: 50px;
}

Answer 2

您需要的是display: inline-block;和white-space: nowrap;的组合。

这样你可以坚持你的固定宽度，并且两个div将保持在一行（当然，如果视口宽度小于1004px，则会出现水平滚动条）。

header {
    font-size: 0; /* solves unwanted space between #ONE and #TWO */
    white-space: nowrap; /* this makes inline-block children not wrap */
}
#ONE, #TWO {
    display: inline-block;
    font-size: 14px; /* reset font-size on children to whatever you need */
    height: 50px;
    width: 500px;
}
#ONE {
    border: 1px solid red;
}
#TWO {
    border: 1px solid yellow;
}

https://jsfiddle.net/hra5t6v0/3/

漂浮的Div下降

2 个答案: